前言

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

插件

  vue-clipboard2

  环境:vue,node

  安装:npm install --save vue-clipboard2

简单实例

  引用:

    import VueClipboard from 'vue-clipboard2'
    import Vue from 'vue'
    Vue.use(VueClipboard)  //必须这样子引用 否则会报错的

 代码

 <template>
<div class='AT-next-btn' style="margin-top:1rem;color:#fff" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">
复制链接
</div>
</template> <script> import VueClipboard from 'vue-clipboard2'
import Vue from 'vue'
Vue.use(VueClipboard) export default {
data(){
return {
message:''你复制的内容‘’
}
},
methods:{
onCopy: function (e) {
alert('复制成功,快分享给你的小伙伴吧')
},
onError: function (e) {
alert('复制失败')
}
}
}
</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. UNIX高级环境编程(4)Files And Directories - umask、chmod、文件系统组织结构和链接

    本篇主要介绍文件和文件系统中常用的一些函数,文件系统的组织结构和硬链接.符号链接. 通过对这些知识的了解,可以对Linux文件系统有更为全面的了解.   1 umask函数 之前我们已经了解了每个文件 ...

  2. K8S Deployment 命令

    创建 Deployment kubectl create -f https://kubernetes.io/docs/user-guide/nginx-deployment.yaml --record ...

  3. 转 oracle的热备份和冷备份

    一.冷备份介绍:    冷备份数据库是将数据库关闭之后备份所有的关键性文件包括数据文件.控制文件.联机REDO LOG文件,将其拷贝到另外的位置.此外冷备份也可以包含对参数文件和口令文件的备份,但是这 ...

  4. BZOJ 2763 飞行路线 BFS分层

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2763 题目大意: Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司 ...

  5. linux查看主板型号及内存硬件信息,及硬盘测速

    查看主板型号: sudo  dmidecode |grep -A16 "System Information$" 内存槽及内存条: sudo  dmidecode |grep -A ...

  6. 20155314 2016-2017-2 《Java程序设计》实验四 Android程序设计

    20155314 2016-2017-2 <Java程序设计>实验四 Android程序设计 实验任务 基于Android Studio开发简单的Android应用并部署测试 了解Andr ...

  7. for var let闭包理解

    let. var. setTimeout,一点思考. for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); }, ...

  8. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  9. Hbase-0.96.2全然分布式安装部署

    Hbase-0.96.2全然分布式安装部署 环境: Hadoop-2.2.0 Zookeeper-3.4.6 hbase-0.96.2 1.下载hbase-0.96.2-hadoop2-bin.tar ...

  10. vue指令:v-model绑定表单控件;v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...