适用于 Vue 2.0 的强大 Contextmenu 组件
Contextmenu 是一个在前端开发中非常有用的组件，可以让用户通过右键单击元素来打开菜单。在 Vue 2.0 中，有很多优秀的 Contextmenu 组件可供选择，其中一个功能非常强大的是 vue-contextmenu。
安装和使用
首先，您需要在项目中安装 vue-contextmenu：
--- ------- --------------- ------
然后，在您的 Vue 组件中导入和注册该组件：
------ --- ---- ----- ------ ----------- ---- ----------------- ---------------------------- ------------
现在，您可以在模板中使用 <contextmenu> 标签，并将菜单项作为它的子组件传递：
----------
-----
-- ----------------------------------------- -------
------------ -------------
--- ------------------------ ----- -------
--------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
---------- -
----------
-
-
-
---------上面的代码创建了一个带有右键菜单的段落。当用户单击鼠标右键时，会打开名为 menu1 的菜单，该菜单包含一个菜单项 Hello，点击该项将弹出一个消息框。
深入学习
在 vue-contextmenu 中，可以使用指令 v-contextmenu:menuName 将上下文菜单绑定到元素。这个指令的参数 menuName 是菜单的名称，应该与 <contextmenu> 组件的 name 属性相同。
当用户右键单击绑定了 v-contextmenu 指令的元素时，将触发 contextmenu 事件。在事件处理程序中，可以使用 $refs 属性访问 <contextmenu> 组件，并调用它的 open() 方法来打开菜单。
您还可以使用 <contextmenu> 的 value 属性来传递值给菜单项。在菜单项组件中，可以通过 $parent.value 访问该属性。
示例代码
下面是一个更完整的示例，包含了带有多个菜单和多个菜单项的 <contextmenu> 组件：
----------
-----
-- ----------------------------------------- -- --- ---- ------
-- ----------------------------------------- -- --- ---- ------
------------ ------------ ------------
--- ------------------------- -- ----- -------
--- ----------------------------- -- -- ------------ -- ---------
--------------
------------ ------------ ------------
--- ------------------------- -- ----- -------
--- ----------------------------- -- -- ------------ -- ---------
--------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
------------- --
-
--
-------- -
---------- -
----------
--
------------------ -
---------------------------
-
-
-
---------在上面的示例中，我们创建了两个菜单 menu1 和 menu2，并将它们绑定到两个不同的段落上。每个菜单都包含两个菜单项，点击菜单项将触发 alert() 方法或调用 openMenu() 方法打开另一个菜单。
总结
vue-contextmenu 是一个功能强大且易于使用的 Contextmenu 组件，它为 Vue
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/5051