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

前言vue

  需求:移動端須要一個按鈕,複製到剪切板,分享給好友(沒有調用微信內置的分享接口)node

插件vue-cli

  vue-clipboard2npm

  環境:vue,node微信

  安裝:npm install --save vue-clipboard2spa

簡單實例插件

  引用:code

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

 

 代碼接口

 1 <template>
 2 <div class='AT-next-btn' style="margin-top:1rem;color:#fff" v-clipboard:copy="message"  v-clipboard:success="onCopy" v-clipboard:error="onError">
 3               複製連接
 4    </div>
 5 </template>
 6 
 7 <script>
 8 
 9 import VueClipboard from 'vue-clipboard2'
10 import Vue from 'vue'
11 Vue.use(VueClipboard)
12 
13 export default {
14   data(){
15       return {
16         message:''你複製的內容‘’
17       }
18   },
19   methods:{
20     onCopy: function (e) {
21         alert('複製成功,快分享給你的小夥伴吧')
22     },
23     onError: function (e) {
24       alert('複製失敗')
25     }
26   }
27 }
28 </script>

bug:

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

  報錯:Failed to resolve directive: clipboard

相關文章
相關標籤/搜索