iview 菜单页面我们可以做一个浮动层，通过拖放按钮来实现菜单隐藏或者展示。
在进入页面的时候菜单式隐藏的：
双击按钮菜单展示：
下面我们先来看菜单的处理：
菜单使用element ui主键做横向菜单,菜单是三级菜单，服务端通过接口生成，iview 获取路由：
<template>
<div class="menu-list">
<div v-show="showGroup">
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#000000"
text-color="#F5FDA6"
active-text-color="#409EFF"
:collapse-transition="true"
:router="true">
<el-menu-item index="#">
<el-image
:src="logoUrl"
fit="none">
</el-image>
</el-menu-item>
<el-menu-item v-for="firstSub in menu" :index="firstSub.path" :key="firstSub.id" v-if="!firstSub.children">
{
{firstSub.name}}
</el-menu-item>
<el-submenu class="over-hide" :index="firstSub.path" v-for="firstSub in menu" v-if="firstSub.children">
<template slot="title">{
{firstSub.name}}</template>
<el-menu-item :index="secondSub.path" v-text="secondSub.name" v-for="secondSub in firstSub.children" :key="secondSub.name" v-if="!secondSub.children"></el-menu-item>
<el-submenu class="over-hide" :index="secondSub.path" v-for="secondSub in firstSub.children" v-if="secondSub.children">
<template slot="title">{
{secondSub.name}}</template>
<el-menu-item :index="threeSub.path" v-text="threeSub.name" v-for="threeSub in secondSub.children" :key="threeSub.name">
{
{threeSub.name}}
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</div>
<button @click="onClick(showGroup)" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="fu" class="float">
<van-icon name="weapp-nav" class="ivu-icon ivu-icon-md-funnel"/>{
{ answer }}
</button>
</div>
</template>
<script>
import { menulist } from '@/libs/menu'
export default {
name: 'menu',
data () {
return {
activeName: '',
active: 'display: block;',
menu: menulist,
showGroup: false,
answer: '隐藏',
flags: false, // 控制使用
position: {
x: 0,
y: 0
},
nx: '',
ny: '',
dx: '',
dy: '',
xPum: '',
yPum: '',
logoUrl: '/baidulogo.png'
}
},
methods: {
down () {
this.flags = true
var touch
if (event.touches) {
touch = event.touches[0]
} else {
touch = event
}
this.position.x = touch.clientX
this.position.y = touch.clientY
this.dx = this.$refs.fu.offsetLeft
this.dy = this.$refs.fu.offsetTop
},
move () {
if (this.flags) {
var touch
if (event.touches) {
touch = event.touches[0]
} else {
touch = event
}
this.nx = touch.clientX - this.position.x
this.ny = touch.clientY - this.position.y
this.xPum = this.dx + this.nx
this.yPum = this.dy + this.ny
const width = window.innerWidth - this.$refs.fu.offsetWidth// 屏幕宽度减去自身控件宽度
const height = window.innerHeight - this.$refs.fu.offsetHeight// 屏幕高度减去自身控件高度
this.xPum < 0 && (this.xPum = 0)
this.yPum < 0 && (this.yPum = 0)
this.xPum > width && (this.xPum = width)
this.yPum > height && (this.yPum = height)
// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
this.$refs.fu.style.left = this.xPum + 'px'
this.$refs.fu.style.top = this.yPum + 'px'
// }
// 阻止页面的滑动默认事件
document.addEventListener(
'touchmove',
function () {
event.preventDefault()
},
false
)
}
},
// 鼠标释放时候的函数
end () {
this.flags = false
},
onClick (showGroup) {
if (showGroup == true) {
this.showGroup = false
// this.answer = '隐藏'
} else {
this.showGroup = true
// this.answer = '展示'
}
},
handleSelect (key, keyPath) {
// console.log(key, keyPath)
console.log(key)
// switch(key){
// case '/dashboard/baidu':
// self.location = '/dashboard/baidu'
// break;
// case '/dashboard/ali':
// self.location = '/dashboard/google'
// break;
// case '/dashboard/hao':
// self.location = '/dashboard/table'
// break;
// default:
// self.location = '/dashboard/baidu'
// break;
// }
self.location = key
}
}
}
</script>
<style>
background-color:rgb(19, 20, 21) !important;
.el-menu-demo>.el-menu--horizontal>.el-menu{
color: rgb(245, 253, 166);
background-color: rgb(19, 20, 21);
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
color: rgb(245, 253, 166);
background-color: rgb(19, 20, 21);
}
.el-menu--horizontal .el-menu .el-submenu>.el-submenu__title {
color: rgb(245, 253, 166);
background-color: rgb(19, 20, 21);
}
.el-menu--horizontal {
color: rgb(245, 253, 166);
background-color: rgb(19, 20, 21);
}
.el-submenu__title {
color: rgb(19, 20, 21);
background-color: rgb(19, 20, 21);
}
.el-collapse-item__header {
background-color: rgb(27, 52, 214);
text-align:center;
color:#e62d94;
}
.el-collapse-item__content {
padding-bottom: 0px;
}
.el-menu-item-logo {
}
</style>
<style lang="stylus" scoped>
.float
position absolute//定位
left 25px//初始x轴位置
top 8%//初始Y轴位置
touch-action none
text-align center
width 48px
height 48px
border-radius 24px
line-height 48px
background rgba(110, 192, 206, 0.61)
color white
z-index 1000000;
</style>
安装下面的依赖包：前提是已经安装iview。
npm install babel-plugin-syntax-dynamic-import；
npm install stylus stylus-loader --save-dev；
npm i default-passive-events -S ；
执行完以上安装就可以看到效果了！