前言

  需求:移动端需要一个按钮,复制到剪切板,分享给好友(没有调用微信内置的分享接口)

插件

  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

[Vue warn]:vue-Failed to resolve directive: clipboard的更多相关文章

  1. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  2. Failed to resolve directive: el vue2报错

    vue2报错 Failed to resolve directive: el 为什么会报这个错呢,主要还是因为vue升级的时候,v-el在vue2.x以后被淘汰.使用新的标签ref替换v-el,接下来 ...

  3. electron-vue [Vue warn]: Failed to resolve directive: decorator

    electron-vue引入ant-desigin-vue使用ant自定义指令 v-decorator报销 <a-form-item> <a-input v-decorator=&q ...

  4. Vue.js Failed to resolve filter: key

    转自:https://stackoverflow.com/questions/35835214/vue-js-failed-to-resolve-filter-key I am following t ...

  5. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  6. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

  7. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  8. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

  9. [Vue warn]: Invalid prop: custom validator check failed for prop "type".

    遇到错误如下, [Vue warn]: Invalid prop: custom validator check failed for prop "type". found in ...

随机推荐

  1. Top 25 Most Frequently Asked Interview Core Java Interview Questions And Answers

    We are sharing 25 java interview questions , these questions are frequently asked by the recruiters. ...

  2. 禁用loop back check

    在sharepoint 2013 服务器上,如果修改了AAM (alternate access mappings), 在服务器上访问本地的sharepoint就会一直弹出登陆窗口,无法访问. 于是必 ...

  3. acl 4 year statistics

  4. 1798. [AHOI2009]维护序列【线段树】

    Description 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...

  5. Hadoop学习之路(五)Hadoop集群搭建模式和各模式问题

    分布式集群的通用问题 当前的HDFS和YARN都是一主多从的分布式架构,主从节点---管理者和工作者 问题:如果主节点或是管理者宕机了.会出现什么问题? 群龙无首,整个集群不可用.所以在一主多从的架构 ...

  6. kukubeadm 1.6.1 + docker1.2.6 安装问题

    kubeadm init --apiserver-advertise-address=192.168.20.229 --pod-network-cidr=10.244.0.0/16 kubelet: ...

  7. ES6新特性5:类(Class)和继承(Extends)

    本文摘自ECMAScript6入门,转载请注明出处. 一.类(Class) 1.基本语法 JavaScript语言的传统方法是通过构造函数,定义并生成新对象.下面是一个例子 function Poin ...

  8. mysql 5.5.42 更改数据目录 centos 6.5环境

    1.新建新数据目录,检查目录属主机权限,一般情况下属于mysql组,myql用户,因为我们安装mysql的时候会新建该账户和组. 2.目录权限检查完毕,停止数据库服务. 3.移动数据目录 ,我用的是m ...

  9. JDBC 使用common-dbutiles

    一:第三方jar mysql-connector-java-5.1.45-bin.jar,需要关注的核心类: 1.DbUtils----操作数据库的连接注册和释放. 2:.QueryRunner--- ...

  10. (转)LR性能测试结果样例分析

    原文作者:猥琐丶欲为 传送门:http://www.cnblogs.com/hyzhou/archive/2011/11/16/2251316.html 测试结果分析 LoadRunner性能测试结果 ...