vue3+elementPlus：el-tree复制粘贴数据功能，并且有弹窗组件

在tree控件里添加@contextmenu属性表示右键点击事件。

因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置。

//html

  
    
  



  

    
复制
    
粘贴
  

  

    

      
您复制的是{{ CopyName }},
      
确定要粘贴到{{ PasteName }}?
      取消
      确定
    
  
  
//js
// 右键菜单
const visible = ref(false)
const topMenu = ref(0)
const leftMenu = ref(0)
const openMenu = (e, val) => {
  datalist.copyData = val

  let x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
  let y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
  topMenu.value = y;
  leftMenu.value = x;
  visible.value = true; //显示菜单

}
//关闭菜单
const closeMenu = () => {
  visible.value = false; //关闭菜单
}

//监听菜单组件
watch(() => visible.value, (newValue, oldValue) => {
  //   监听属性对象，newValue为新的值，也就是改变后的值
  if (newValue) {
    //菜单显示的时候
    // document.body.addEventListener，document.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 = val
  CopyID.value = val.id
  CopyName.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.id
  await getCopyPaste(CopyID.value, PasteID.value)
  POPshow.value = false
  TreeNode.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