vue-lil-context-menu 是一个 Vue.js 的上下文菜单组件，可以在页面上轻松地添加上下文菜单。
安装
可以通过 npm 安装：
npm install vue-lil-context-menu
引入
可以在项目根目录中引入：
import ContextMenu from 'vue-lil-context-menu' import 'vue-lil-context-menu/dist/ContextMenu.css'
使用
基本用法
-- -------------------- ---- -------
----------
-----
------- --------------------------------------------------------------------
------------- ------------------
--- ------------------------- ------
------ ------
------ ------
---------------
------
-----------
--------
------ ----------- ---- ----------------------
------ -------------------------------------------
------ ------- -
----------- -
------------
--
-------- -
------------- -
------------------- --------
--
--
-
---------Props
可以通过 props 自定义菜单样式：
-- -------------------- ---- -------
----------
-----
------- --------------------------------------------------------------------
------------- ----------------- -------------------
--- ------------------------- ------
------ ------
------ ------
---------------
------
-----------
--------
------ ----------- ---- ----------------------
------ -------------------------------------------
------ ------- -
----------- -
------------
--
------ -
------ -
---------- -
------- ------ --- ------
---------------- -------
-------- ------
--------- --------
--
-
--
-------- -
------------- -
------------------- --------
--
--
-
---------Slot
还可以使用 slot 自定义每个菜单项的样式和内容：
-- -------------------- ---- -------
----------
-----
------- --------------------------------------------------------------------
------------- ----------------- -------------------
--- ------------- ------ -- ------ -------------
----- ------------ ---------------
-------- ---------- ---------
----- -------------------------------
-------
------------- --------------------
--- ---------------- --------- -- ------------- ----------------
----- --------------- -------------------- ------------- ---------
-----
---------------
-----
---------------
------
-----------
--------
------ ----------- ---- ----------------------
------ -------------------------------------------
------ ------- -
----------- -
------------
--
------ -
------ -
---------- -
------------- ------ --- ------
---------------- -------
-------- ------
--------- --------
--
------ -
-
------ --- ---
-------- -
-
------ --- -----
--
-
------ --- -----
--
-
------ --- -----
--
--
--
-
------ --- ---
--
-
------ --- ---
--
--
-
--
-
---------实例
使用 ref 获取实例：
-- -------------------- ---- -------
----------
-----
------- --------------------------------------------------------------------
------------- ----------------- ------------------ ---------------------
--- ------------- ------ -- ------ -------------
----- ------------ ---------------
-------- ---------- ---------
----- -------------------------------
-------
------------- --------------------
--- ---------------- --------- -- ------------- ----------------
----- --------------- -------------------- ------------- ---------
-----
---------------
-----
---------------
------
-----------
--------
------ ----------- ---- ----------------------
------ -------------------------------------------
------ ------- -
----------- -
------------
--
------ -
------ -
---------- -
------------- ------ --- ------
---------------- -------
-------- ------
--------- --------
--
------ -
-
------ --- ---
-------- -
-
------ --- -----
--
-
------ --- -----
--
-
------ --- -----
--
--
--
-
------ --- ---
--
-
------ --- ---
--
--
-
--
-------- -
------------------ -
------------------ ------- - -- -------
--
--
-
---------结语
以上就是 vue-lil-context-menu 的使用教程，我们可以简单地添加上下文菜单，还可以通过自定义 props 和 slot 打造出各种样式和效果的上下文菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adb81e8991b448d87d9