vue 项目使用 Clipboard(复制文本或图片到剪贴板)遇到的一些坑
1、安装插件npm install clipboard --save2、复制纯文本<template><div><a class="clip-btn"data-clipboard-text="'hello world'"href="javascript:void(0);">复制文本</a></div><template>.
·
1、安装插件
npm install clipboard --save
2、复制纯文本
<template>
<div>
<a class="clip-btn"
data-clipboard-text="'hello world'"
href="javascript:void(0);">复制文本</a>
</div>
<template>
<script>
import Clipboard from 'clipboard';
export default {
name: 'index',
data(){
return {
btnCopy:'',
}
}
mounted() {
this.btnCopy = new Clipboard('.clip-btn')
this.btnCopy.on('success', (e) => {
console.log('Text:', e.text)
this.$message({message: '复制成功', type: 'success'})
e.clearSelection()
})
},
beforeDestroy () {
// 销毁clipboard
if (this.btnCopy && this.btnCopy.destroy) {
this.btnCopy.destroy()
}
}}
</script>
3、复制富文本的内容(包括文本和图片)
<template>
<div>
<a class="clip-btn"
data-clipboard-target="#copytext"
href="javascript:void(0);">复制文本</a>
<div id="copytext">
<p>我是富文本</p>
<img src="../../1.png"/>
</div>
</div>
<template>
<script>
import Clipboard from 'clipboard';
export default {
name: 'index',
data() {
return {
btnCopy:'',
}
}
mounted() {
this.btnCopy = new Clipboard('.clip-btn',{
target: function(trigger) {
return document.getElementById('copytext');
}
})
this.btnCopy.on('success', (e) => {
console.log('Text:', e.text)
this.$message({message: '复制成功', type: 'success'})
e.clearSelection()
})
},
beforeDestroy () {
// 销毁clipboard
if (this.btnCopy && this.btnCopy.destroy) {
this.btnCopy.destroy()
}
}}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)