Vue中配合clipboard.js实现点击按钮复制内容到剪切板
# 安装clipboard
npm install clipboard --save
1
# 引入
在 main.js 中
import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;
1
2
3
2
3
# 组件中使用
1、方法一
<template>
<div>
<input type="text" id="success_form_input" readonly="readonly" v-model="link"/>
/*button上的这个ref需要命名一个,名字自己取,下面会讲解为什么*/
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
copyBtn: null //存储初始化复制按钮事件
}
},
mounted() {
/*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是:this + 注册时命名名字)
*这里需要用到刚才给button命名的ref的名字,因为这是vue提供的获取DOM的方法,虽然可以通过引入jQuery来获取,但是不推荐这样做,具体原因可以看官方文档和网上论坛搜索
*这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来,具体原因下面会有详述
*/
this.copyBtn = new this.clipboard(this.$refs.copy);
},
methods: {
copyLink() {
/*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/
let _this = this;
let clipboard = _this.copyBtn;
clipboard.on('success', function() {
_this.$message({ /*这是使用了element-UI的信息弹框*/
message: '复制成功!',
type: 'success'
});
});
clipboard.on('error', function() {
_this.$message({
message: '复制失败,请手动选择复制!',
type: 'error'
});
});
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2、方法二
在页面中使用
<p class="clipboardObj" :data-clipboard-text="inviteCode" @click="copy">一键复制</p>
1
在方法里写
copy () {
let clipboard = new Clipboard('.clipboardObj') // 这里可以理解为选择器,选择上面的复制按钮
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('复制失败')
// 释放内存
clipboard.destroy()
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
也有可能遇到复制没有反应 我遇到有两种情况,第一种需要复制的内容为空 第二中 选择器没有找到要复制的内容 可以采取另一种方式
<p @click="copy($event,inviteCode)">一键复制</p> //inviteCode要复制的值
1
copy(e, text) {
const clipboard = new Clipboard(e.target, { text: () => text })
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('复制失败')
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13