vue实现文本点击复制
2022-03-13 本文已影响0人
Kyriez7
clipboard.js的引入和使用
在平时的开发过程中难免会需要实现 点击复制文本的功能,我们一般是通过clipboard.js去实现
1.引入clipboard.js
- 通过npm安装:npm install clipboard --save
- 通过通过引入源文件:下载地址
<script src="js/clipboard.min.js"></script>
2.在需要使用的组件里import
import Clipboard from 'clipboard'
3.使用和方法
<span class="tag-read" data-clipboard-text="我是点击复制的内容" @click="copy">我是点击复制的内容</span>
copy () {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e =>{
// 不支持复制
console.log('该浏览器不支持复制')
// 释放内存
clipboard.destroy()
})
},
image.png通过点击文本就会将其复制