vue实现指定div右键显示菜单，并实现复制内容到粘贴板

效果图

 

实现

全有注释，代码如下：

    
    

          {{item}}
    

    
    

      
        

          复制
        
        

          更多
        
      
    

export default {
  name: 'chart',
  data () {
    return {
      mess: '', // 输入的信息
      isShowMenu: false, // 是否显示右侧菜单
      Menu_item: '', // 复制的内容
      Menu_top: 0,
      Menu_left: 0
    }
  },
  // 初始化
  created () {
    this.addCloseMenu()
  },
  methods: {
    /**
     * 添加关闭右键菜单的监听器
     */
    addCloseMenu () {
      // 添加监听器，用于其他位置点击时，关闭打开的右键菜单,并清空获取的key
      document.addEventListener('click', () => {
        this.isShowMenu = false
        this.Menu_item = ''
      })
      // 添加监听器，用于点击菜单内按钮时，关闭打开的右键菜单,并清空获取的key
      document.addEventListener('mousedown', (e) => {
        const {button} = e
        if (button === 2) {
          this.isShowMenu = false
          this.Menu_item = ''
        }
      })
    },
    // 右键菜单-聊天内容-事件
    showMenu (e, item) {
      this.isShowMenu = true
      // 定位
      this.Menu_top = e.pageY
      this.Menu_left = e.pageX
      // 获取当前选中内容
      this.Menu_item = item
    },
    // 复制功能
    onCopy () {
      let msg = this.Menu_item
      // 复制到粘贴板
      navigator.clipboard.writeText(msg)
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          this.$message.error('复制失败，原因：' + err)
        })
    }
  }
}

/*右键菜单css样式*/
.rightMenu_mess_content{
  position: fixed;
}
.rightMenu_mess_content_card /deep/ .el-card__body{
  padding: 0;
}
.rightMenu_mess_content_card /deep/ .el-button{
  border: 0;
  padding: 12px 30px;
}
.rightMenu_mess_content_card_item{
  border-bottom: solid 1px #eeeded;
}