Vue+Xterm.js 右键菜单 实现复制粘贴

vue集成右键菜单参考的

Vue 原生右键菜单组件 - SegmentFault 思否

Vue----右键弹出菜单(vue-contextmenu)_xyy1234567891的博客-CSDN博客

本来想自己实现右键菜单,奈何水平不够(其实是懒得写)

写复制的时候往剪切板写数据遇到问题了,网上找也没找到怎么写,最后参考了Clipboard.readText() - Web API 接口参考 | MDN (mozilla.org)

还是官方文档给力,

 this.sendData 是给后台发送的,自己改成自己的就可以了

还是需要善于分享自己的东西,每次分享的时候总能发现自己的问题,不说了,要改bug去了

 onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: '复制', divided: true,
            onClick: () => {
              if (!this.term) { return }
              navigator.clipboard.writeText(this.term.getSelection())
            }
          },
          {
            label: '粘贴', divided: true,
            onClick: () => {
              if (!this.term) { return }
              navigator.clipboard.readText().then(clipText => {
                this.sendData(clipText)
                this.term.focus()
              })
            }
          },
          {
            label: '清屏', divided: true,
            onClick: () => {
              if (!this.term) { return }
              if (!this.ws) { return }

              this.sendData('clear\r')
            }
          } 
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'contextmenu-custom-class',
        zIndex: 3000,
        minWidth: 195
      })
      return false
    },

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值