vue3 clipboard复制内容

clipboard.js可以实现js复制，详见js实现复制、粘贴，clipboard.min.js的使用。这里是在vue3中使用clipboard进行复制的方法：

首先，安装依赖

npm install clipboard --save

其次，html：

<button class="copy" data-clipboard-text="复制内容" @click="copy">复制</button>

第三，js

import Clipboard from 'clipboard'
const copy = () => {
    let clipboard = new Clipboard('.copy')
    clipboard.on('success', (e) => {
        console.log('复制成功', e)
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制', e)
        // 释放内存
        clipboard.destroy()
    })
}

注意：

data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。

阻止冒泡@click.stop无法使用clipboard进行复制，改为原生js的方法实现：

const copy = (data: string) => {
  let url = data
  let oInput = document.createElement('textarea')
  oInput.value = url
  document.body.appendChild(oInput)
  oInput.select() // 选择对象;
  document.execCommand('Copy') // 执行浏览器复制命令
  console.log('复制成功')
  oInput.remove()
}