JS常用工具函数-复制功能(不限于文本框且有选中操作)

好的插件能够在效率和兼容性上为开发提供很大帮助，但是在实际项目中还是需要根据需求来确定是否使用

“复制”这个功能属于项目中常见需求，很多人包括我一开始都会选择使用clipboard这个插件，针对不同前端框架又衍生了新的升级插件，比如vue-clipboard，最近项目中需要实现这个功能，总感觉为此引入一个插件不值得，虽然没多大，所以去看了下源码，发现核心代码其实很简单，更多的是做了各种平台框架下的处理，比如就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);
    }
  });
},

demo

let ele = document.getElementById('id') // js
let ele = this.$refs[ele] // vue
documentCopy(ele).then(res => {
    if (res) {
        return this.$Message.success('复制成功')
    } else {
        this.$Message.error('复制失败，请手动复制')
    }
})