在vue中如何使用clipboard复制文字

1.首先安装clipboard

npm install  clipboard

如果你安装了淘宝镜像也可以使用cnpm

2.在需要使用地方引入

import Clipboard from 'clipboard'

3.使用 Clipboard提供的方法

linecopy(index){
      let clipboard =new Clipboard('.spa',{
        text: function(){
          return index
        }
      })
      clipboard.on('success',e=>{
        this.$notify({
          title: '成功',
          message: '复制成功',
          type: 'success',
          duration: 400
        })
        clipboard.destroy();
      })
      clipboard.on('error',e=>{
        this.$notify.err({
          title: '失败',
          message: '复制失败',
          duration: 400
        })
        clipboard.destroy();
      })
    }

4.手动实现复制文本

function clipboard(str, op="copy") {
    str = String(str)
    const fakeElem = document.createElement('textarea')
    fakeElem.style.position = 'absolute'
    fakeElem.style.left = '-999999px'
    fakeElem.value = str
    document.documentElement.appendChild(fakeElem)
    fakeElem.setAttribute('readonly', '')
    fakeElem.select()
    fakeElem.setSelectionRange(0, str.length)
    fakeElem.removeAttribute('readonly')
    //执行浏览器复制命令
    const res = document.execCommand(op)
    document.documentElement.removeChild(fakeElem)
    return res
  }
  export default clipboard

说明如下

这里的 linecopy 是点击复制按钮执行的方法，参数是你要复制的内容, .spa代表着你按钮的类名