纯前端需求,要求点击 “复制” 按钮把输入框或者指定的文本复制到粘贴板。vue 有专门的插件来实现这个功能:vue-clipboard2、clipboard
vue-clipboard2
安装:
npm install --save vue-clipboard2
在main.js中引入:
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
页面使用:
<template>
<div class="container">
<div id="target">
<p v-for="item in list">{{item}}</p>
</div>
<button type="button" @click="copy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
}
},
methods: {
copy() {
let text = document.getElementById('target').innerText;
this.$copyText(text).then((e) => {
console.log('复制成功');
}, (e) => {
console.log('复制成功');
})
}
}
}
</script>
clipboard
安装:
npm install clipboard --save
在main.js里引入:
import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;
页面里使用:
<template>
<div class="container">
<div id="target">
<p v-for="item in list">{{item}}</p>
</div>
<button class="btn" type="button" data-clipboard-target="#target" @click="copy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
}
},
methods: {
copy() {
let clipboard = new this.clipboard(".btn");
clipboard.on('success', function () {
console.log("复制成功")
});
clipboard.on('error', function () {
console.log("复制失败")
});
}
}
}
</script>
data-clipboard-target属性的值指定被复制元素的选择器;
data-clipboard-action属性来指定你想要复制(copy)还是剪切(cut)内容,默认copy;
还需要注意的是如果设置cut动作只在 或 元素里面起作用;
单页应用程序可以使用 clipboard.destroy() 方法来销毁创建的事件和对象;
如果你不需要从另一个元素来复制内容。你只需要给目标元素设置一个 data-clipboard-text 属性就可以了; data-clipboard-text 属性值为你设置的固定内容。
原生方法
原生方法也可以实现复制,但是兼容性不怎么好,有些浏览器不支持。主要是通过动态创建一个 input 框,把要复制内容放到 input 框里, 然后手动控制选中,在调用浏览器的 copy 方法。
<template>
<div class="container">
<div id="target">
<p v-for="item in list">{{item}}</p>
</div>
<button type="button" @click="copyText">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
}
},
methods: {
copyText() {
let text = document.getElementById('target').innerText;
let inputElement = document.createElement('input')
inputElement.value = text;
document.body.appendChild(inputElement);
inputElement .select(); //选中文本
document.execCommand("copy"); //执行浏览器复制命令
inputElement.remove();
console.log("复制成功")
}
}
}
</script>