[Vue warn]:vue-Failed to resolve directive: clipboard

前言

　　需求：移動端需要一個按鈕，復制到剪切板，分享給好友（沒有調用微信內置的分享接口）

插件

　　vue-clipboard2

　　環境：vue，node

　　安裝：npm install --save vue-clipboard2

簡單實例

　　引用：

　　　　import VueClipboard from 'vue-clipboard2'
　　　　import Vue from 'vue'
　　　　Vue.use(VueClipboard)  //必須這樣子引用 否則會報錯的

 

　代碼

<template>
<div class='AT-next-btn' style="margin-top:1rem;color：#fff" v-clipboard:copy="message"  v-clipboard:success="onCopy" v-clipboard:error="onError">
              復制鏈接
   </div>
</template>

<script>

import VueClipboard from 'vue-clipboard2'
import Vue from 'vue'
Vue.use(VueClipboard)

export default {
  data(){
      return {
        message:''你復制的內容‘’
      }
  },
  methods:{
    onCopy: function (e) {
        alert('復制成功，快分享給你的小伙伴吧')
    },
    onError: function (e) {
      alert('復制失敗')
    }
  }
}
</script>

bug:

　　剛開始引用的時候 沒有引用 Vue.use(VueClipboard)

　　報錯：Failed to resolve directive: clipboard