iview 菜单页面浮动可以拖动按钮

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 ；

执行完以上安装就可以看到效果了！