Vue实现自定义右击删除菜单的示例

下面我来详细讲解如何实现Vue自定义右击删除菜单的步骤和示例说明。

步骤说明

步骤一：创建组件

首先，我们需要在Vue中创建一个自定义的右击菜单组件（ContextMenu），用于显示右击时的删除按钮和相应事件。

<template>
  <div v-show="showMenu" class="context-menu-wrapper" @mouseleave="hideContextMenu">
    <ul class="context-menu">
      <li v-for="(item, index) in menuList" :key="index" @click="clickMenu(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      menuList: [
        // 自定义菜单
        { name: '删除', type: 'delete' }
      ]
    }
  },
  methods: {
    clickMenu(item) {
      this.$emit(item.type)
    },
    hideContextMenu() {
      this.showMenu = false
    }
  }
}
</script>

上述代码中，我们使用Vue的v-show指令和showMenu变量来控制删除菜单的显示和隐藏；使用CSS样式来设置菜单的样式；使用Vue的v-for指令和menuList变量来循环渲染菜单项；使用emit方法向父组件发送事件，告知菜单被点击时的操作。

步骤二：创建父组件

接着，我们需要在父组件中引入ContextMenu组件，并在需要右击菜单的元素上绑定右击事件，以及在父组件中实现删除事件的逻辑。

<template>
  <div @contextmenu.prevent="showContextMenu">
    <img src="./assets/img/delete.png" @click.stop="removeItem" />
    <ContextMenu @delete="removeItem" />
  </div>
</template>

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

export default {
  components: {
    ContextMenu
  },
  methods: {
    showContextMenu(event) {
      event.preventDefault()
      const x = event.pageX
      const y = event.pageY
      this.$refs.contextmenu.$el.style.left = x + 'px'
      this.$refs.contextmenu.$el.style.top = y + 'px'
      this.$refs.contextmenu.showMenu = true
    },
    removeItem() {
      // 删除操作
    }
  }
}
</script>

上述代码中，我们使用Vue的prevent指令和右击事件，阻止浏览器默认的右击菜单；使用ref来引用子组件ContextMenu，并在showContextMenu方法中设置删除菜单的位置和显示；使用stop阻止了删除按钮的点击事件冒泡，避免误操作。

示例说明

示例一：删除任务列表

我们在一个任务管理系统中的任务列表中，引入上述自定义右击菜单组件和父组件，实现删除任务功能。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in taskList" :key="index" @contextmenu.prevent="showContextMenu(index)">
        <span>{{ item.name }}</span>
        <ContextMenu ref="contextmenu" @delete="deleteTask" />
      </li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    ContextMenu
  },
  data() {
    return {
      taskList: [
        { name: '完成Vue学习任务' },
        { name: '完成JavaScript基础教程任务' },
        { name: '完成前端面试宝典任务' }
      ],
      currentTaskIndex: -1
    }
  },
  methods: {
    showContextMenu(index) {
      this.currentTaskIndex = index
    },
    deleteTask() {
      this.taskList.splice(this.currentTaskIndex, 1)
      this.currentTaskIndex = -1
    }
  }
}
</script>

在上述代码中，我们使用v-for指令和遍历任务列表，将ContextMenu组件绑定到任务列表的每个元素上。在showContextMenu方法中，获取到当前右击的任务索引，并在deleteTask方法中使用splice方法将当前任务删除。

示例二：删除图片

我们在一个图片管理系统中，引入上述自定义右击菜单组件和父组件，实现删除图片功能。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in imageList" :key="index" @contextmenu.prevent="showContextMenu(index)">
        <img :src="item.url" />
        <ContextMenu ref="contextmenu" @delete="deleteImage" />
      </li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    ContextMenu
  },
  data() {
    return {
      imageList: [
        { url: './assets/img/pic1.jpg' },
        { url: './assets/img/pic2.jpg' },
        { url: './assets/img/pic3.jpg' }
      ],
      currentImageIndex: -1
    }
  },
  methods: {
    showContextMenu(index) {
      this.currentImageIndex = index
    },
    deleteImage() {
      this.imageList.splice(this.currentImageIndex, 1)
      this.currentImageIndex = -1
    }
  }
}
</script>

在上述代码中，我们使用v-for指令和遍历图片列表，将ContextMenu组件绑定到每个图片元素上。在showContextMenu方法中，获取到当前右击的图片索引，并在deleteImage方法中使用splice方法将当前图片删除。

这两个示例说明了我们如何基于Vue实现自定义右击删除菜单，只需要按照上述步骤，根据不同的需求和场景，修改菜单项和操作方法即可。