vue2.0的contextmenu右键弹出菜单的实例代码

下面是关于vue2.0的contextmenu右键弹出菜单的实例代码的完整攻略。

什么是contextmenu

contextmenu是网页中的右键菜单，通常我们可以通过JS来自定义这个菜单，来达到与用户交互的效果。

准备工作

首先我们需要准备一个基于Vue.js 2.0的环境，包括Vue.js库和常用的Vue工具。在这里，我们使用Vue-cli来初始化一个新的Vue项目。

实现contextmenu

在组件中引入菜单组件

首先，我们需要引入一个菜单组件，这个组件可以用来显示菜单选项。这里我们使用vue-context-menu这个插件。

安装方式：

npm install vue-context-menu --save

然后，在需要使用右键菜单的Vue组件中，引入vue-context-menu组件，并在<template>中使用它，如下所示：

<template>
  <div>
    <div 
      v-for="(item, index) in itemList" 
      :key="index" 
      v-context-menu:contextMenu="menuEvents"
      :class="{ 'active': activeIndex === index }" 
      @click="activeIndex = index">
      {{ item }}
    </div>
    <ContextMenu 
      :event="event"
      :position="position"
      :data="menuItems"
      :class="{ 'hidden': !showMenu }"
      @select="selectMenuItem"
    />
  </div>
</template>

<script>
import ContextMenu from 'vue-context-menu'

export default {
  components: {
    ContextMenu
  },
  data() {
    return {
      activeIndex: -1,
      itemList: ['apple', 'banana', 'orange'],
      event: null,
      position: null,
      showMenu: false,
      menuItems: [
        { text: '删除', value: 'delete' },
        { text: '编辑', value: 'edit' }
      ]
    }
  },
  methods: {
    menuEvents(e) {
      this.event = e
      this.position = { x: e.clientX, y: e.clientY }
      this.showMenu = true
      e.preventDefault()
    },
    selectMenuItem(item) {
      console.log(item)
    }
  }
}
</script>

在上面的例子中，我们使用v-context-menu指令来绑定我们定义的方法menuEvents，当右键点击元素时，该方法将被调用。menuEvents方法首先将事件保存下来，之后计算出上下文菜单的位置，然后打开上下文菜单。

编写上下文菜单的界面

接下来，我们需要编写上下文菜单的界面。在<template>标记中，我们使用ContextMenu组件来渲染上下文菜单：

<template>
  <div :style="{ top: position.y + 'px', left: position.x + 'px' }">
    <ul>
      <li v-for="(item, index) in data" :key="'context-menu-item-' + index" @click="selectItem(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    event: {
      type: Object,
      required: true
    },
    position: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectItem(item) {
      this.$emit('select', item.value)
    }
  }
}
</script>

在上面的例子中，我们使用<ul>和<li>标记来显示上下文菜单中的选项。当用户选择一个选项时，我们将使用$emit方法来触发父组件中的selectMenuItem方法。

示例说明

示例1：自定义右键菜单的选项

通过修改menuItems中的数组来添加、移除或修改上下文菜单的选项。比如，如果你想要删除"删除"选项，可以直接将其从数组中移除。

示例2：隐藏/显示上下文菜单

你可以在menuEvents方法中添加自己的判断语句来控制上下文菜单的显示和隐藏。比如，你可以在某些情况下不显示上下文菜单，或者你可以在某些其他情况下显示上下文菜单。