在vue项目中使用Jquery-contextmenu插件的步骤讲解

当我们在 Vue 项目中需要使用 jQuery 插件时，通常的解决方案是直接引用 jQuery 和插件库的 js/css 文件，然而这样做归纳起来有以下几个问题：

• 与 Vue 编程思想不符。
• jQuery 插件模块化管理及作用域难以控制。
• Vue 单文件组件与 jQuery 插件不兼容。

针对这些问题，我们可以通过将 jQuery 插件转为 Vue 组件来解决。下面是在 Vue 项目中使用 jQuery-contextmenu 插件的步骤：

步骤一：安装 jQuery-contextmenu 和 jQuery

通过 npm 安装 jQuery 和 jQuery-contextmenu

npm install jquery jquery-contextmenu

步骤二：创建一个 Vue 组件，用来封装 jQuery-contextmenu 插件

在 src 目录下创建一个 components 目录，并在它下面创建一个 ContextMenu.vue 文件，用来封装 jQuery-contextmenu 插件。

<template>
  <div></div>
</template>

<script>
//引入 jQuery-contextmenu 插件
import 'jquery-contextmenu/dist/jquery.contextMenu.min.css';
import 'jquery-contextmenu/dist/jquery.contextMenu.min.js';
import $ from 'jquery';

export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },

  mounted() {
    //将 Vue 实例赋给 _this，下面的代码中使用
    let _this = this;

    //合并配置项，设置默认值
    let options = $.extend({
      selector: 'div',
      callback: function (key, options) {
        _this.$emit('on-menu-click', key, options);
      }
    }, this.options);

    //调用 jQuery-contextmenu 插件
    $(this.$el).contextMenu(options);
  }
};
</script>

步骤三：使用 ContextMenu 组件

在需要使用 ContextMenu 的地方引入组件，并在模板中使用。

<template>
  <div>
    <div v-context-menu="menuOptions">右键点击此处显示菜单</div>
  </div>
</template>

<script>
import ContextMenu from '@/components/ContextMenu';

export default {
  components: {
    ContextMenu
  },

  data() {
    return {
      menuOptions: {
        items: {
          edit: {name: "编辑"},
          cut: {name: "剪切"}
        }
      }
    };
  },

  methods: {
    onMenuClick(key, options) {
      console.log(key);
    }
  },

  mounted() {
    this.$refs.contextMenu.$on('on-menu-click', this.onMenuClick);
  }
};
</script>

我们在这个示例中创建一个 ContextMenu 组件，并在它下面的 mounted 钩子中调用了 jQuery-contextmenu 插件，并且将 Vue 实例传递给了 $emit 回调函数中。使用 ContextMenu 组件时，我们可以通过 v-context-menu 指令来使用，并且传递菜单的配置项。最后，当菜单点击时，我们在父组件中获取回调函数的参数。

另一个示例：

<template>
  <div>
    <ContextMenu :options="menuOptions">
      <div>右键点击此处显示菜单</div>
    </ContextMenu>
  </div>
</template>

<script>
import ContextMenu from '@/components/ContextMenu';

export default {
  components: {
    ContextMenu
  },

  data() {
    return {
      menuOptions: {
        items: {
          edit: {name: "编辑"},
          cut: {name: "剪切"}
        }
      }
    };
  },

  methods: {
    onMenuClick(key, options) {
      console.log(key);
    }
  },

  mounted() {
    this.$refs.contextMenu.$on('on-menu-click', this.onMenuClick);
  }
};
</script>

这个示例中我们可以看到，在使用 ContextMenu 组件时我们可以像使用普通的组件一样，将菜单内容插入到它的内部。同时也可以传递菜单的配置项，以及监听菜单点击事件。

好的，通过这两个完整的示例，我相信你已经掌握了如何在 Vue 项目中使用 jQuery-contextmenu 插件了。