vue-contextmenujs
Vue 原生实现右键菜单组件, 零依赖
项目地址:https://github.com/GitHub-Laziji/menujs
快速安装
npm 安装
npm install vue-contextmenujsCDN
<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">使用
测试中使用的是element-ui图标
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);<template>
<div id="app" style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>
<script>
export default {
methods: {
onContextmenu(event) {
this.$contextmenu({
items: [
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}
},
{ label: "前进(F)", disabled: true },
{ label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
{ label: "另存为(A)..." },
{ label: "打印(P)...", icon: "el-icon-printer" },
{ label: "投射(C)...", divided: true },
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
},
{
label: "截取网页(R)",
minWidth: 0,
children: [
{
label: "截取可视化区域",
onClick: () => {
this.message = "截取可视化区域";
console.log("截取可视化区域");
}
},
{ label: "截取全屏" }
]
},
{ label: "查看网页源代码(V)", icon: "el-icon-view" },
{ label: "检查(N)" }
],
event,
//x: event.clientX,
//y: event.clientY,
customClass: "class-a",
zIndex: 3,
minWidth: 230
});
return false;
}
}
};
</script>参数说明
Menu
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| items | 菜单结构信息 | MenuItem[] | — | — |
| event | 鼠标事件信息 | Event | — | — |
| x | 菜单显示X坐标, 存在event则失效 | number | — | 0 |
| y | 菜单显示Y坐标, 存在event则失效 | number | — | 0 |
| zIndex | 菜单样式z-index | number | — | 2 |
| customClass | 自定义菜单class | string | — | — |
| minWidth | 主菜单最小宽度 | number | — | 150 |
MenuItem
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 菜单项名称 | string | — | — |
| icon | 菜单项图标, 生成<i></i>元素 | string | — | — |
| disabled | 是否禁用菜单项 | boolean | — | false |
| divided | 是否显示分割线 | boolean | — | false |
| customClass | 自定义子菜单class | string | — | — |
| minWidth | 子菜单最小宽度 | number | — | 150 |
| onClick | 菜单项点击事件 | Function() | — | — |
| children | 子菜单结构信息 | MenuItem[] | — | — |
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！