在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代表着你按钮的类名