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

最新推荐文章于 2024-05-16 13:30:42 发布

Sca_jie

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量819

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端 css html

本文链接：https://blog.csdn.net/weixin_42966151/article/details/131575357

版权

vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

效果图

实现

全有注释，代码如下：

    <!--指定的需要右键菜单的div-->
    <div class="content"  @contextmenu.prevent="showMenu($event, item)">
          <span class="content_msg">{{item}}</span>
    </div>

    <!--右键菜单-聊天内容复制-->
    <div class="Menu" v-if="isShowMenu" :style="{'left': Menu_left + 'px', 'top': Menu_top + 'px'}">
      <el-card class="Menu_card">
        <div class="Menu_card_item">
          <el-button @click="onCopy">复制</el-button>
        </div>
        <div class="Menu_card_item">
          <el-button>更多</el-button>
        </div>
      </el-card>
    </div>

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;
}