1、vue-clipboard2的介绍
vue-clipboard2是前端能够调用剪切板的一个插件,可以实现复制内容到剪切板。
npm地址:vue-clipboard2 - npm
github地址:/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><input type="text" v-model="message"><!-- copy内填写属性名 --><button type="button"v-clipboard:copy="message"v-clipboard:success="firstCopySuccess"v-clipboard:error="firstCopyError">复制</button></template>
对应的事件方法
<script>export default {data() {return {message: "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>
3.2 第二种使用:this.$copyText()方法进行复制
对应的源代码块 操作<button @click="copyData">第二种方式复制</button>
对应的事件方法
methods: {copyData(){//如果不需要回调:this.$copyText(this.message)//如果需要回调:this.$copyText(this.message).then( e => {alert('复制成功')console.log(e)}, function (e) {alert('复制失败')console.log(e)})}}