1分钟Vue实现右键菜单

下面是实现“1分钟Vue实现右键菜单”的完整攻略。

1. 安装插件

首先，我们需要安装一个Vue插件，名为v-contextmenu。可以使用命令行或者编辑package.json文件的方式进行安装。

npm install v-contextmenu --save

2. 导入要使用的组件

在需要使用右键菜单的Vue组件中，我们需要先导入v-contextmenu插件提供的两个组件：

<template>
  <div v-contextmenu="menu">
    <p>鼠标右击这里</p>
  </div>
</template>

<script>
import { ContextMenu, MenuItem } from "v-contextmenu";

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  data() {
    return {
      menu: [
        { label: "复制", action: () => console.log("复制") },
        { label: "粘贴", action: () => console.log("粘贴") },
        { label: "剪切", action: () => console.log("剪切") }
      ]
    };
  }
};
</script>

这里，我们使用了v-contextmenu的ContextMenu和MenuItem两个组件。ContextMenu组件用来展示右键菜单，MenuItem组件用来定义菜单中每个选项的显示和处理逻辑。

在data中，我们定义了要展示的右键菜单的内容，使用了数组格式，每个元素都是一个对象，对象中包含label属性表示要显示的菜单选项名称，和action属性表示点击后要执行的函数或方法。

3. 在Vue组件中使用右键菜单

使用v-contextmenu指令就可以在Vue组件中使用右键菜单：

<template>
  <div v-contextmenu="menu">
    <p>鼠标右击这里</p>
  </div>
</template>

<script>
import { ContextMenu, MenuItem } from "v-contextmenu";

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  data() {
    return {
      menu: [
        { label: "复制", action: () => console.log("复制") },
        { label: "粘贴", action: () => console.log("粘贴") },
        { label: "剪切", action: () => console.log("剪切") }
      ]
    };
  }
};
</script>

在上面的代码中，我们将v-contextmenu指令添加到了一个div元素上，指令的值为我们定义的menu数组，表示右键菜单的选项内容。

示例说明

示例1

我们可以在action函数中添加一些具体的逻辑，比如弹出提示框等等：

<template>
  <div v-contextmenu="menu">
    <p>鼠标右击这里</p>
  </div>
</template>

<script>
import { ContextMenu, MenuItem } from "v-contextmenu";

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  data() {
    return {
      menu: [
        { label: "复制", action: () => console.log("复制") },
        { label: "粘贴", action: () => console.log("粘贴") },
        { label: "剪切", action: () => console.log("剪切") },
        { label: "提示框", action: () => alert("这是一个提示框") }
      ]
    };
  }
};
</script>

在上面的代码中，我们添加了一个新的菜单选项提示框，在其action函数中使用了alert函数弹出一个提示框。

示例2

我们还可以根据不同的组件进行不同的操作。例如，我们可以在一个img元素中使用右键菜单，然后在点击菜单选项时将当前图片保存下来：

<template>
  <div>
    <img src="https://picsum.photos/id/237/300/200" v-contextmenu="menu" />
  </div>
</template>

<script>
import { ContextMenu, MenuItem } from "v-contextmenu";

export default {
  components: {
    ContextMenu,
    MenuItem
  },
  data() {
    return {
      menu: [
        {
          label: "保存图片",
          action: () =>
            this.saveImage(
              "https://picsum.photos/id/237/300/200",
              "pic.jpg"
            )
        }
      ]
    };
  },
  methods: {
    saveImage: function(url, filename) {
      let a = document.createElement("a");
      a.download = filename;
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
};
</script>

在上面的代码中，我们使用了img元素展示图片，并且在该元素上添加了 v-contextmenu指令，指令的值为我们定义的menu数组，表示右键菜单的选项内容。

在menu数组中，我们定义了一个菜单选项保存图片，并添加了一个action函数，该函数会将该图片的url地址和一个指定的文件名传入saveImage函数中。

在saveImage函数中，我们使用了a标签和其download属性来将该图片下载保存至本地。