前端实现复制功能(不限于文本框且有选中操作)

项目中有一个需求是点击按钮 复制标签内容,因为之前用过vue-clipboard这个插件,所以直接拿来用了。不过之后又想了想插件大小只有十几K,看看是怎么实现的,结果发现复制的功能还是通过execCommand来实现的 更多的是做了一些平台兼容处理,比如通过vue的自定义指令、事件绑定实现复制功能,那根据我的需求是不用引入这个插件,只需要将其中的部分代码抠出来再添加选中的操作就可以了

documentCopy(ele) {
  if (!(ele !== undefined && ele !== null)) return Promise.resolve(0);
  // 如果支持 select 就使用
  if (ele.select) {
    ele.select();
  } else {
    let selection = window.getSelection();
    let createRange = document.createRange();
    createRange.selectNodeContents(ele);
    selection.removeAllRanges();
    selection.addRange(createRange);
  }
  return new Promise((resolve) => {
    try {
      if (document.execCommand('copy', false, null)) {
        document.execCommand("Copy");
        resolve(1);
      } else {
        resolve(0);
      }
    } catch (err) {
      resolve(0);
    }
  });
},

猜你喜欢

转载自blog.csdn.net/qq_24510455/article/details/80829865