vue-Failed to resolve directive: clipboard

摘要： 前言 需求：移動端需要一個按鈕，複製到剪下板，分享給好友（沒有呼叫微信內建的分享介面） 外掛 vue-clipboard2 環境：vue，node 安裝：npm install --save vue-clipboard2 簡單例項 引用： import V...

前言

需求：移動端需要一個按鈕，複製到剪下板，分享給好友（沒有呼叫微信內建的分享介面）

外掛

vue-clipboard2

環境：vue，node

安裝：npm install --save vue-clipboard2

簡單例項

引用：

import VueClipboard from 'vue-clipboard2'

import Vue from 'vue'

Vue.use(VueClipboard)  //必須這樣子引用 否則會報錯的

程式碼

 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 {
14data(){
15return {
16message:''你複製的內容‘’
17}
18},
19methods:{
20onCopy: function (e) {
21alert('複製成功，快分享給你的小夥伴吧')
22},
23onError: function (e) {
24alert('複製失敗')
25}
26}
27 }
28 </script>

bug:

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

報錯：Failed to resolve directive: clipboard