【utils】复制

最近有个复制文本的需求，整理了下前端常用的复制方法：
第一种：

function copyText(text) {
  const input = document.createElement('input')
  let status = false
  input.setAttribute('readonly', 'readonly')
  input.setAttribute('value', text)
  document.body.appendChild(input)
  input.focus()
  input.setSelectionRange(0, text.length)
  status = document.execCommand('copy', true)
  document.body.removeChild(input)
  return status
}

第二种：使用www.npmjs.com/package/cli… 。

1、安装

npm install clipboard --save

2、引入

import Clipboard from 'clipboard'

3、使用

• 触发操作与复制目标非同一元素。data-clipboard-action属性值可为copy or cut,指定是复制还是剪切操作，data-clipboard-target属性指定目标元素

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

• 触发操作与复制目标为同一元素。data-clipboard-text的值为需要复制的文本

<!-- Trigger -->
<button
  class="btn"
  data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
  Copy to clipboard
</button>

• 需要将复制结果反馈至用户，可以监听success和error事件，如下：

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

• 以上虽然可以实现复制，但是代码比较冗余，有时还需要创建额外的元素用于盛待复制文本。所以我根据clipboard提供的advanced options重新封装了复制方法，如下：

/**
 * @description: 复制文本兼容mac
 * @param {*} target 复制操作元素选择器。如果直接传元素，第一次点击复制无效，第二次有效
 * @param {*} text 待复制文本
 */
export function clipboardCopy(target,text) {
  const promise = new Promise((resolve,reject)=>{
    var clipboard = new Clipboard(target,{
      text:()=>text
    })
    clipboard.on('success', function() {
      resolve()
      clipboard.destroy()
    })
    clipboard.on('error', function() {
      reject()
      clipboard.destroy()
    })
  })
  return promise
}

使用方法如下：

clipboardCopy('.btn','123').then(()=>{
  console.log('复制成功')
})

需要注意的是：第一个参数也可以直接传目标元素，但是这种方法第一次调用不会执行复制，第二次开始才会复制。网上的解答是，第一次调用是初始化，具体mojiya。