vue中复制功能
不使用插件
可以使用
input标签，然后通过execCommand(‘copy’)函数实现复制功能
复制标签中内容实现
<template>
<div id="app">
输入需要复制的内容：<input id="copy" v-model="crj"/>
<button v-on:click="copy()">复制</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
crj: ''
}
},
methods: {
copy () {
var input = document.getElementById('copy')
input.select() // 选中input标签
document.execCommand('copy') // 执行复制
this.$message.success('success!')
},
},
}
</script>
复制非标签中内容实现
<template>
<div>
<button id="copy" v-on:click="copy()">复制</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
crj: '需要复制的内容！'
}
},
methods: {
copy () {
var input = document.createElement('input') // 创建input标签
input.value = this.crj; // 将input的值设置为需要复制的内容
document.body.appendChild(input) // 添加input标签
input.select() // 选中input标签
document.execCommand('copy') // 执行复制
this.$message.success('success!') // 成功提示信息
document.body.removeChild(input) // 移除input标签
},
},
}
</script>
使用插件（Clipboard）
安装Clipboard插件
npm install clipboard --save
导入插件
//全局导入，在main.js中导入（可选）
import clipboard from ‘clipboard’
Vue.prototype.clipboard = clipboard
//局部导入，在对应文件导入
import clipboard from ‘clipboard’
使用
<template>
<div class="contentViews" style="text-align: left;">
<div class="copy">
<h4>单个文本进行复制</h4>
<!-- 简单用法 -->
<div class="one">
<p id="foo1">{
{
copyText }}</p>
<!--复制按钮 -->
<el-button id="btn" size="mini" type="primary" data-clipboard-action="copy" data-clipboard-target="#foo1"
@click="copyFun">复制</el-button>
</div>
<!-- 高阶用法 -->
<h4>多个文本进行复制</h4>
<div class="list">
<div class="item" v-for="(item, index) in copyTextList" :key="index">
<p :id="item.textId">{
{
item.text }}</p>
<!--复制按钮 -->
<el-button id="btn" type="primary" size="mini" data-clipboard-action="copy"
:data-clipboard-target="'#' + item.textId" @click="copyFun">复制</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import DemoMd from '../../md/vue中复制功能.md';
export default {
data() {
return {
// 单行文本的复制
copyText: '代码是写出来给人看的，附带能在机器上运行',
// 多行文本进行复制
copyTextList: [
{
textId: 'p1',
text: '画笔，臣服于我!',
},
{
textId: 'p2',
text: '欲买桂花同载酒,终不负,少年游!',
},
{
textId: 'p3',
text: '以此烈火,斩无不断! 烈焰焚尽！',
},
{
textId: 'p4',
text: '今夜的月色严厉而冰冷，一如寒彻的锋刃，照耀将死之人的面孔！',
},
]
};
},
methods: {
copyFun() {
let _this = this
let clipboard = new Clipboard('#btn'); // 获取点击按钮的元素
/* 注意此事件监听是异步的 */
clipboard.on('success', (e) => {
e.clearSelection();
// 释放内存
clipboard.destroy();
_this.$message.success(`复制成功：${
e.text}`)
// return alert('复制成功：' + e.text);
});
// 复制失败
clipboard.on('error', (e) => {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
// 释放内存
clipboard.destroy();
_this.$message.error('该浏览器不支持自动复制');
});
},
},
};
</script>
使用插件 vue-clipboard2
安装
npm install --save vue-clipboard2
导入插件
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)
使用 【指令的方式进行复制】
<template>
<div>
<div>
<textarea name="复制内容" id cols="30" rows="10" v-model="copyText"></textarea>
<button
v-clipboard:copy="copyText"
v-clipboard:success="firstCopySuccess"
v-clipboard:error="firstCopyError"
>复制</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
copyText: 'crj'
};
},
methods: {
firstCopySuccess(e) {
console.log("copy arguments e:", e);
alert("复制成功!");
},
firstCopyError(e) {
console.log("copy arguments e:", e);
alert("复制失败!");
}
}
};
</script>
使用 【this.$copyText()方法进行复制】
<button @click="seccendCopy">复制</button>
<script>
export default {
data() {
return {
copyText: 'crj'
};
},
methods: {
seccendCopy() {
this.$copyText(this.copyText).then(
function (e) {
console.log("copy arguments e:", e);
alert("复制成功!");
},
function (e) {
console.log("copy arguments e:", e);
alert("复制失败!");
}
);
}
}
};
</script>