在vue中使用🙈一键复制🙈/vue-clipboard2

在开发过程中遇到一个需求 👉 复制内容到剪贴板

找了一下发现可以用clipboard.js来实现，vue项目中可以直接通过 vue-clipboard2 来实现

安装vue-clipboard2

npm install --save vue-clipboard2

main.js中引入

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

.vue文件中

用法一

     <p>{{message}}<p>

     <div type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">一键复制</div>
      
      
  onCopy (e) {
      alert('You just copied: ' + e.text)
    },
    onError (e) {
      alert('Failed to copy texts')
    },

用法二

   <p>{{message2}}</p>
   <button type="button" @click="doCopy('add me!')">Copy!</button>
   
   
     dataProcessing (val) {
        this.message2 = this.message2 + ' ' + val
      },
      doCopy: function (val) {
        this.dataProcessing(val)
        this.$copyText(this.message2).then(function (e) {
            console.log(e)
            alert('Copied='+ e.text)
        }, function (e) {
           alert('Can not copy',e.text)
           console.log(e)
        })
      }

👍 用法二可以对复制文字处理后再复制到剪贴板