vue使用Clipboard复制剪切板

clipboard工具

新建clipboard.js

import Clipboard from 'clipboard'

/**
 * 复制到剪切板
 * @param text 需要复制的文字
 * @param event 触发复制的元素
 * @param execution 成功后需要执行的函数: 也可以根据自己的使用传多组函数
 */
export default function handleClipboard(text, event, execution){
  const clipboard =  new Clipboard(event.target,{
    text:() => text
  })
  clipboard.on('success',() => {
    if (execution instanceof Function) { // 如果传入的是函数,则执行,根据自己的时使用执行不同效果
      execution()
    }
    clipboard.destroy()
  })
  clipboard.on('error',() =>{
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

使用

简单使用

<span class="el-icon-copy-document" @click="copyText(response)"></span>

copyText(text) {
  if (text instanceof Object) {
    text = JSON.stringify(text)
  }
  clipboard(text, event, () => {
    this.$message.success('复制成功!')
  })
}

点击复制后,成功会展示对号

// 元素
<div class="info">
 <span class="copy">
  <span v-show="copyFlag === '' || copyFlag !== 'response'" class="el-icon-copy-document" @click="copyText(response, 'response')"></span>
  <span v-show="copyFlag === 'response'" class="el-icon-document-checked" style="color:#13CE66;"></span>
 </span>
</div>

// 数据定义
data() {
 return {
     copyFlag: '',
     response: '' // 需要复制的数据
 }
}
// js触发复制
copyText(text, copyFlag) {
  if (text instanceof Object) {
    text = JSON.stringify(text)
  }
  clipboard(text, event, () => {
    this.$message.success('复制成功!')
    this.copyFlag = copyFlag
    setTimeout(() => {this.copyFlag = ''}, 1000)
  })
}

// 
.info {
  &:hover {
      .copy{
        display: block;
      }
    }
    .copy {
      display: none;
      width: 16px;
      height: 16px;
      margin-left: 5px;
      margin-bottom: -10px;
      position: absolute;
      bottom: 12px;
      right: 3px;
    }
}

注:如果直接在vue的触发方法中new Clipboard() 则会出现第一次点击不能复制的bug,需要采用上面新建js文件,调用的方式(原因:新建文件的方式加载的时候已经将Clipboard建好,触发只是调用)