1、vue-clipboard2 介绍
vue-clipboard2 是前端能够调用 剪切板 的一个插件。
2、vue-clipboard2安装
npm install --save vue-clipboard2
3、使用
使用前,在main进行注册
import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)
1. 使用方法一
使用指令的方式进行绑定
<template>
<div>
<div>
<textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
<button
v-clipboard:copy="value"
v-clipboard:success="firstCopySuccess"
v-clipboard:error="firstCopyError"
>第一种方式复制</button>
</div>
<div>
<textarea name="粘贴内容" id cols="30" rows="10"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: "A simple vuejs 2 binding for clipboard.js!"
};
},
methods: {
firstCopySuccess(e) {
console.log("copy arguments e:", e);
alert("复制成功!");
},
firstCopyError(e) {
console.log("copy arguments e:", e);
alert("复制失败!");
}
}
};
</script>
2. 第二种使用方法
第二种方法使用this.$copyText()方法进行复制。
对应的源代码块
操作
<button @click="seccendCopy">第二种方式复制</button>
对应的事件方法
seccendCopy() {
this.$copyText(this.value).then(
function(e) {
console.log("copy arguments e:", e);
alert("复制成功!");
},
function(e) {
console.log("copy arguments e:", e);
alert("复制失败!");
}
);
}