使用clipboard实现复制到剪切板功能（超详细~~）

先看看效果：

 

1.页面中使用

// html
复制

// js

2.复制黏贴的功能封装

import Clipboard from 'clipboard'
const utils = {
  copy2clipboard (str) {
    const oInput = document.createElement('input')
    // 把文字放进input中，供复制
    oInput.value = str
    oInput.id = 'copydom'
    document.body.appendChild(oInput)
    // 选中创建的input
    oInput.select()
    // 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
    const copyResult = document.execCommand('copy')
    // 根据返回的复制结果 给用户不同的提示
    if (copyResult) {
      instance.$Message.success('已复制到粘贴板')
      // 操作中完成后 从Dom中删除创建的input
      document.body.removeChild(oInput)
    } else {
      // this.$Message.error('复制失败')
      let clipboard = new Clipboard('#copydom')
      clipboard.on('success', () => {
        instance.$Message.success('已复制到粘贴板')
        // 操作中完成后 从Dom中删除创建的input
        document.body.removeChild(oInput)
      })
      clipboard.on('error', () => {
        instance.$Message.error('复制失败')
        // 操作中完成后 从Dom中删除创建的input
        document.body.removeChild(oInput)
      })
    }
  }  
}
export default utils

以上便可以实现一个基本的复制功能，可根据自己的项目进行调整。