For the iview menu page, we can make a floating layer and hide or display the menu by dragging and dropping buttons.
The menu is hidden when entering the page:
Double-click the button menu to display:
Let's first look at the processing of the menu:
The menu uses the element ui main key as a horizontal menu, the menu is a three-level menu, the server generates through the interface, and iview obtains the route:
<template>
<div class="menu-list">
<div v-show="showGroup">
<the-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:'Hide',
flags: false, // Control the use
position: {
x: 0,
and: 0
},
nx: '',
new: '',
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// screen width minus its own control width
const height = window.innerHeight-this.$refs.fu.offsetHeight// The height of the screen minus the height of its own controls
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'
// }
// Prevent page sliding default event
document.addEventListener(
'touchmove',
function () {
event.preventDefault()
},
false
)
}
},
// Function when the mouse is released
end () {
this.flags = false
},
onClick (showGroup) {
if (showGroup == true) {
this.showGroup = false
// this.answer ='hide'
} else {
this.showGroup = true
// this.answer ='show'
}
},
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//positioning
left 25px//initial x-axis position
top 8%//initial Y axis position
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>
Install the following dependency packages: the premise is that iview has been installed.
npm install babel-plugin-syntax-dynamic-import;
npm install stylus stylus-loader --save-dev;
npm i default-passive-events -S;
After performing the above installation, you can see the effect!