安装插件clipboard.js
路径地址:clipboard.js — Copy to clipboard without Flash
1.引入
方法一: npm安装:
npm install clipboard --save
方法二:
<script src="js/clipboard.min.js"></script>
2.需要使用的组件中import
import Clipboard from 'clipboard';
3.添加需要复制的内容
<button class="tag-read" data-clipboard-text="可以复制的内容,请点击复制" @click="copy">立即阅读</button>
解析: data-clipboard-text 后边跟需要复制的内容,如果是动态添加内容可用:data-clipboard-text="变量"
4.添加点击后的方法
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
注意: 如果不是input或者button 按钮的话,则复制不成功!