H5/PC点击复制功能

262 阅读1分钟

方法中的参数element是我的项目需要的,因为我的页面有多个地方需要复制,所以用的同一个时间传入不通的元素参数

// H5复制
      copy(data,element) {
          var copyDOM = document.getElementById(element); //指定的DOM元素
          var range = document.createRange(); // 创建容器
          range.selectNode(copyDOM); // 选中需要复制的节点
          window.getSelection().addRange(range); // 执行选中元素
          var successful = document.execCommand('copy');// 执行 copy 操作
          try {
              var msg = successful ? 'successful' : 'unsuccessful';
              vant.Notify({ type: 'success', message: '复制成功!' });

          } catch(err) {
              console.log('unable to copy');
          }
          window.getSelection().removeAllRanges(); // 移除选中的元素

      },

该方法只需要传入要复制的文本

 // PC
  copy(data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
          message: '复制成功',
          type: 'success'
      });
      oInput.remove()
  },