Vue3 复制文字到粘贴板

//click 复制 IOS不会受影响

 <span @click.stop="copyCode">11111</span>


// 点击复制
    function copyCode() {
      let domInput = document.createElement('input');
      domInput.value = props.listCode;
      document.body.appendChild(domInput);  // 添加input节点
      domInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      Toast({
        message: '复制成功',
        icon: 'checked',
        iconSize: '20px',
        className: 'tipToast',
      })
      domInput.remove()
    }





//长按复制 IOS会受影响，最好调用原生粘贴板方法
<span class="infoValue" @touchstart="gtouchstart(dataList.waybillNo)" @touchmove="gtouchmove()"
            @touchend="showDeleteButton(dataList.waybillNo)">
            {{ dataList.waybillNo }}
          </span>



//长按事件（起始）
    const gtouchstart = (item) => {
      timeOutEvent = setTimeout(function () {
        longPress(item);
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
      return false;
    }
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    const showDeleteButton = (item) => {
      clearTimeout(timeOutEvent); //清除定时器
      if (timeOutEvent != 0) {
        //这里写要执行的内容（如click事件，span标签需要多加一个click事件，在此处调用）
        console.log("点击但未长按");
      }
      return false;
    }
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    const gtouchmove = () => {
      clearTimeout(timeOutEvent); //清除定时器
      timeOutEvent = 0;
    }
    //真正长按后应该执行的内容
    const longPress = (val) => {
      timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      let domInput = document.createElement('input');
      domInput.value = val;
      document.body.appendChild(domInput);  // 添加input节点
      domInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      if (document.execCommand("Copy") == false) {  //兼容IOS
        getClipboard(domInput.value)  //getClipboard为IOS提供的原生粘贴板方法
      }
      Toast({
        message: '复制成功',
        icon: 'checked',
        iconSize: '20px',
        className: 'tipToast',
      })
      domInput.remove()
    }