zoukankan      html  css  js  c++  java
  • [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)  //必须这样子引用 否则会报错的

     代码

     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

  • 相关阅读:
    【面试题总结】第三篇
    Django 多账号登录
    Zabbix3.2 监控搭建
    2017.09.24校内训练
    2017.09.06校内训练
    tyvj P1001 第K极值
    洛谷P1020导弹拦截
    洛谷P1006传纸条
    2017.09.10校内训练
    hdu_1086 You can Solve a Geometry Problem too
  • 原文地址:https://www.cnblogs.com/ifannie/p/9784309.html
Copyright © 2011-2022 走看看