vue 使用剪切板功能功能vue-clipboard2

vue-clipboard2介绍

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明，
npm地址https://www.npmjs.com/package/vue-clipboard2
github地址https://github.com/Inndy/vue-clipboard2

1.安装

npm install --save vue-clipboard2

2.在main.js中引入

import VueClipboard from 'vue-clipboard2' //复制粘贴功能
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)

3.页面使用

  <p>{{showtags}}</p>   //展示拷贝的内容
  <el-button
            type="primary"
            v-clipboard:copy="showtags"      //这里showtags为拷贝内容  按钮点击拷贝
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制</el-button>
或者
  <p      v-clipboard:copy="showtags"      //这里showtags为拷贝内容  这里是直接点击内容拷贝
            v-clipboard:success="onCopy"
            v-clipboard:error="onError" >{{showtags}}</p>

方法：
    onCopy: function(e) {
      console.log("复制成功");
    },
    onError: function(e) {
      console.log("复制失败");
    },