For pure front-end requirements, click the "copy" button to copy the input box or the specified text to the pasteboard. Vue has a special plug-in to achieve this function: vue-clipboard2 , clipboard
1 、 view-clipboard2
installation:
npm install --save vue-clipboard2
Introduced in main.js:
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
Page usage:
<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>
2、clipboard
installation:
npm install clipboard --save
Introduced in main.js:
import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;
Use in the page:
<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>
The value of the data-clipboard-target attribute specifies the selector of the copied element; the
data-clipboard-action attribute specifies whether you want to copy or cut the content, the default is copy;
also note that if you set cut Actions only work in the or element;
single-page applications can use the clipboard.destroy() method to destroy the created events and objects;
if you don't need to copy content from another element. You only need to set a data-clipboard-text attribute to the target element; the data-clipboard-text attribute value is the fixed content you set.
3. Native method
The native method can also be copied, but the compatibility is not very good, and some browsers do not support it. It is mainly by dynamically creating an input box, putting the content to be copied into the input box, and then manually controlling the selection, and calling the copy method of the browser.
<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>