vue实现右键菜单栏

下面是关于“Vue实现右键菜单栏”的完整攻略：

1. 实现思路

在 Vue 中实现右键菜单栏，主要思路是利用浏览器的鼠标事件监听，如 contextmenu 事件监听右键事件，通过计算菜单出现的位置，在指定位置显示菜单。

然后，我们可以仿照系统右键菜单的实现，设置菜单项、子菜单等，通过计算父菜单的位置，使子菜单在合理位置显示。最后，在点击外部区域时，隐藏菜单。

2. 实现步骤

第一步：实现基本框架

基本框架包含一个容器组件、一个右键菜单组件和一个菜单项组件。

容器组件实现 contextmenu 事件监听，当事件触发时，设置右键菜单的状态为显示。

右键菜单组件包含若干个菜单项子组件，通过计算菜单显示位置，设置菜单的 style 属性，即可在对应的位置显示菜单。

菜单项组件通过 slot 插槽获取菜单项的内容。

第二步：计算菜单出现的位置

计算菜单的位置需要掌握以下几个知识点：

1. event.pageX 和 event.pageY 获取鼠标相对于文档的坐标
2. clientWidth 和 clientHeight 获取元素的宽度和高度
3. window.innerWidth 和 window.innerHeight 获取视窗的宽度和高度

通过这些知识点，我们可以计算出菜单应该出现的位置。

第三步：优化菜单样式

为了实现更美观的菜单样式，可以通过 CSS 代码设置菜单的背景色、圆角、阴影等样式。

第四步：实现菜单项和子菜单

可以通过递归组件实现多层级菜单，也可以设置一个递归深度的上限。

如果要实现菜单项的点击事件，可以通过自定义事件来实现。如：

// 右键菜单组件
<Menu @select="onSelect">
  <MenuItem label="菜单项1"></MenuItem>
  <MenuItem label="菜单项2">
    <Menu>
      <MenuItem label="子菜单项1"></MenuItem>
      <MenuItem label="子菜单项2"></MenuItem>
    </Menu>
  </MenuItem>
</Menu>

// 容器组件
methods: {
  onSelect (label) {
    console.log(`选中了菜单项 ${label}`);
  }
}

在菜单项组件中，可以通过 emit 方法触发 select 事件，并传递当前菜单项的标签值。

第五步：隐藏菜单

为了隐藏菜单，我们可以通过监听全局的 mousedown 事件，判断是否点击了菜单区域以外的区域，如果是则隐藏菜单。需要注意的是，由于 mousedown 事件在孩子元素触发后也会冒泡到父元素，所以需要加上 .stop 修饰符，阻止事件冒泡。

3. 示例代码

下面提供两条示例代码，分别是基本版和升级版的菜单实现。

基本版代码

<template>
  <div @contextmenu.prevent="showMenu" class="container">
    <ContextMenu v-if="show" :style="{left:x+'px', top:y+'px'}">
      <MenuItem>菜单项1</MenuItem>
      <MenuItem>
        菜单项2
        <ContextMenu>
          <MenuItem>子菜单项1</MenuItem>
          <MenuItem>子菜单项2</MenuItem>
        </ContextMenu>
      </MenuItem>
    </ContextMenu>
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue'
import MenuItem from './MenuItem.vue'

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  data () {
    return {
      show: false,
      x: 0,
      y: 0
    }
  },
  methods: {
    showMenu (event) {
      event.stopPropagation()
      this.show = true
      this.x = event.pageX
      this.y = event.pageY
    },
    hideMenu () {
      this.show = false
    }
  },
  mounted () {
    // 点击页面任意位置时隐藏菜单
    document.addEventListener('mousedown', this.hideMenu)
  },
  destroyed () {
    // 组件销毁时解除监听
    document.removeEventListener('mousedown', this.hideMenu)
  }
}
</script>

升级版代码

<template>
  <div @contextmenu.prevent="showMenu" class="container">
    <ContextMenu v-if="show" :style="{left:x+'px', top:y+'px'}">
      <MenuItem v-for="item in items" :key="item.label"
                @click="selectItem(item.label)"
                :has-submenu="item.children && item.children.length > 0"
                :label="item.label">
        <ContextMenu v-if="item.children && item.children.length > 0"
                     :parent-x="x" :parent-y="y" :items="item.children"></ContextMenu>
      </MenuItem>
    </ContextMenu>
  </div>
</template>

<script>
import ContextMenu from './ContextMenu.vue'
import MenuItem from './MenuItem.vue'

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      show: false,
      x: 0,
      y: 0
    }
  },
  methods: {
    showMenu (event) {
      event.stopPropagation()
      this.show = true
      this.x = event.pageX
      this.y = event.pageY
    },
    hideMenu () {
      this.show = false
    },
    selectItem (label) {
      this.$emit('select', label)
      this.hideMenu()
    }
  },
  mounted () {
    // 点击页面任意位置时隐藏菜单
    document.addEventListener('mousedown', this.hideMenu)
  },
  destroyed () {
    // 组件销毁时解除监听
    document.removeEventListener('mousedown', this.hideMenu)
  }
}
</script>

以上是关于“Vue实现右键菜单栏”的详细攻略，希望能帮助你实现自己的右键菜单功能。