2.0.2 • Published 3 years ago
td-contextmenu v2.0.2
自定义右键菜单
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 参数 | object | { el, data, beforeShow, shown, beforeHide, hidden, beforeDestroy, destroyed } | — |
options说明
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| el | 元素节点和样式节点的id | string | mycontextmenu | — |
| data | 自定义菜单结构数据 | array | — | — |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| beforeShow | 显示前的回调函数 | event |
| shown | 显示后的回调函数 | event |
| beforeHide | 隐藏前的回调函数 | event |
| hidden | 隐藏后的回调函数 | event |
| beforeDestroy | 销毁前的回调函数 | — |
| destroyed | 销毁后的回调函数 | — |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| setData | 设置菜单结构数据 | array |
| removeMenu | 清空菜单结构数据 | — |
| show | 显示右键菜单 | — |
| hide | 隐藏右键菜单 | — |
| destroy | 销毁组件 | — |
使用
CDN引入
<script src="https://unpkg.com/td-contextmenu/lib/index.min.js"></script>let contextmenu = new TdContextMenu({
el: "mycontextmenu",
data: [
[
{
icon: "",
title: "复制",
func: null,
},
{
icon: "",
title: "粘贴",
func: null,
},
{
icon: "",
title: "剪切",
func: null,
}
],
[
{
icon: "",
title: "移动",
func: null,
children: [
[
{
icon: "",
title: "上移",
func() {
console.log("开始上移")
// ...
},
},
{
icon: "",
title: "下移",
func: null,
}
]
]
}
]
],
beforeShow(e) {
console.log("显示前的回调");
},
shown(e) {
console.log("显示后的回调");
},
beforeHide(e) {
console.log("隐藏前的回调");
},
hidden(e) {
console.log("隐藏后的回调");
},
beforeDestroy() {
console.log("销毁前的回调");
},
destroyed() {
console.log("销毁后的回调");
}
})
更新： npm version patch npm publish