vue3使用clipboard实现复制功能

安装依赖

npm install clipboard --save

使用示例

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

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()
    })
}

<button class="copy" @click="handleCopy(state.code)">复制</button>

import { reactive } from 'vue'

const state = reactive( {
code : '<el-row>\n' +
    '  <el-col :span="24">\n' +
    '    <el-card class="box-card">\n' +
    '      <template #header>\n' +
    '        <div class="card-header">\n' +
    '          <span>卡片名称</span>\n' +
    '          <el-button class="button" type="text">更多</el-button>\n' +
    '        </div>\n' +
    '      </template>\n' +
    '      <div class="text item">卡片内容</div>\n' +
    '    </el-card>\n' +
    '  </el-col>\n' +
    '</el-row>'
})

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

注意： data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。 阻止冒泡@click.stop无法使用clipboard进行复制，改为使用其他方法实现。

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()
 }