1、vue-clipboard2介紹
vue-clipboard2是前端能夠調用剪切板的一個插件。具體的描述官網上也有具體的說明，
npm地址https://www.npmjs.com/package/vue-clipboard2
github地址https://github.com/Inndy/vue-clipboard2
2、vue-clipboard2安裝
npm install --save vue-clipboard2
3、使用
- 使用前進行注冊
import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard);
3.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>
- 事件參數e
3.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("復制失敗!");
}
);
}