上海 互联网公司,优化一个网站需要多少钱,h5网页制作素材,企业网站建设渠道在tree控件里添加contextmenu属性表示右键点击事件。 因右键自定义菜单事件需要获取当前点击的位置#xff0c;所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置。 //html
div classbox-listel-tree reftreeRef node-keyid… 在tree控件里添加contextmenu属性表示右键点击事件。 因右键自定义菜单事件需要获取当前点击的位置所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置。 //html
div classbox-listel-tree reftreeRef node-keyid :props{ label: name, isLeaf: leaf } :loadloadNode lazyhighlight-current :expand-on-click-nodetrue node-clickhandleNodeClick :filter-node-methodfilterNodetemplate #default{ node, data }!-- contextmenu表示右键点击事件 --span classcustom-tree-node contextmenu.prevent.nativeopenMenu($event, data)svg classicon svg-icon aria-hiddenfalseuse :xlink:href# data.icon/use/svgspan{{ data.name }}/span/span/template/el-tree
/div!-- 因右键自定义菜单事件需要获取当前点击的位置所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 --ul v-showvisible :style{ left: leftMenu px, top: topMenu px } classcontextmenuli clickonCopy(datalist.copyData) v-ifdatalist.copyData.nodeType ! 1复制/lili clickPOPshow true; onPaste(datalist.copyData)粘贴/li/uldiv v-showPOPshowdiv :style{ left: leftMenu px, top: topMenu px } classcontextmenup您复制的是{{ CopyName }},/pp确定要粘贴到{{ PasteName }}?/pel-button stylewidth:48px;height:24px; clickPOPshow false;取消/el-buttonel-button typeprimary stylewidth:48px;height:24px; clickonDefine确定/el-button/div/div//js
// 右键菜单
const visible ref(false)
const topMenu ref(0)
const leftMenu ref(0)
const openMenu (e, val) {datalist.copyData vallet x e.pageX; //这个应该是相对于整个浏览器页面的x坐标左上角为坐标原点0,0let y e.pageY; //这个应该是相对于整个浏览器页面的y坐标左上角为坐标原点0,0topMenu.value y;leftMenu.value x;visible.value true; //显示菜单}
//关闭菜单
const closeMenu () {visible.value false; //关闭菜单
}//监听菜单组件
watch(() visible.value, (newValue, oldValue) {// 监听属性对象newValue为新的值也就是改变后的值if (newValue) {//菜单显示的时候// document.body.addEventListenerdocument.body.removeEventListener它们都接受3个参数// (事件名 , 事件处理函数 , 布尔值);// 在body上添加事件处理程序document.body.addEventListener(click, closeMenu);} else {//菜单隐藏的时候// 移除body上添加的事件处理程序document.body.removeEventListener(click, closeMenu);}
})// 复制 按钮
const CopyID ref()
const CopyName ref()
const onCopy async (val) {// console.log(e,e复制事件);// console.log(val, val复制事件);datalist.copyData valCopyID.value val.idCopyName.value val.name
}
// 粘贴 按钮
const PasteName ref()
const onPaste async (val) {PasteName.value val.name
}
// 复制粘贴 确定按钮
const PasteID ref()
const POPshow ref(false)
const onDefine async () {PasteID.value datalist.copyData.idawait getCopyPaste(CopyID.value, PasteID.value)POPshow.value falseTreeNode.value.loaded false// 主动调用展开节点方法重新查询该节点下的所有子节点TreeNode.value.expand()handleModel(id.value)
}
// 调用复制 粘贴 接口
const getCopyPaste async (copyNodeId, pasteNodeId) {let res await CopyTreeList({ copyNodeId: copyNodeId, pasteNodeId: pasteNodeId })if (res.status ! 200) {ElNotification({title: 提示,message: res.data.message,type: error,})}
}//css
// 右键菜单组件
.contextmenu {margin: 0;background: #fff;z-index: 3000;position: fixed; //关键样式设置固定定位list-style-type: none;padding: 5px 0;border-radius: 4px;font-size: 12px;font-weight: 400;color: #333;box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}.contextmenu li {margin: 0;padding: 7px 16px;cursor: pointer;
}.contextmenu li:hover {background: #eee;
} 上一篇文章
vue2踩坑之项目生成二维码使用vue-print-nb打印二维码_意初的博客-CSDN博客vue2踩坑之项目生成二维码使用vue-print-nb打印二维码import print from vue3-print-nb directives: { print } //自定义指令中注册。vue3安装 npm install vue3-print-nb --save。vue2安装 npm install vue-print-nb --save。directives: { print} //自定义指令中注册。//vue2 引入方式 全局 main.js。https://blog.csdn.net/weixin_43928112/article/details/132725143
