前言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