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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue 中使用 xterm.js 和 WebSocket 实现终端,你需要将用户输入的命令发送给后端,然后将后端返回的结果输出到 xterm.js 终端中。以下是一个简单的示例: ```html <template> <div id="terminal"></div> </template> <script> import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; export default { data() { return { socket: null, // WebSocket 实例 term: null, // Terminal 实例 }; }, mounted() { // 创建 WebSocket 实例 this.socket = new WebSocket('ws://localhost:8080'); // 创建 Terminal 实例 this.term = new Terminal(); const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); this.term.open(document.getElementById('terminal')); // 处理 WebSocket 消息 this.socket.onmessage = (event) => { this.term.write(event.data); }; // 处理输入事件 this.term.onData(data => { this.socket.send(data); }); // 调整终端大小 this.term.onResize(size => { const cols = size.cols; const rows = size.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }); // 发送 resize 消息 const cols = this.term.cols; const rows = this.term.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }, beforeDestroy() { // 关闭 WebSocket 连接 this.socket.close(); } } </script> ``` 以上代码中,我们首先在 `mounted` 钩子函数中创建了一个 WebSocket 实例和一个 Terminal 实例。然后我们为 WebSocket 实例添加了一个 `onmessage` 事件监听器,该监听器会在接收到服务器返回的消息时触发,我们在该事件处理函数中将消息输出到终端中。 接着,我们为 Terminal 实例添加了一个 `onData` 事件监听器,该监听器会在用户输入时触发,我们在该事件处理函数中向服务器发送用户输入的命令。同时,我们还为 Terminal 实例添加了一个 `onResize` 事件监听器,该监听器会在终端大小调整时触发,我们在该事件处理函数中向服务器发送终端大小变化的消息。 最后,我们在 `beforeDestroy` 钩子函数中关闭了 WebSocket 连接。 需要注意的是,以上代码中的 WebSocket 连接是通过 `ws://localhost:8080` 连接本地服务器的,你需要根据实际情况修改 WebSocket 连接地址。另外,代码中的消息格式和处理逻辑也需要根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值