Vue中使用clipboard实现复制功能


Posted in Javascript onSeptember 05, 2018

clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件。下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示:

首先现在Vue中引入clipboard

npm install clipboard --save

在需要使用的组件中import 引入clipboard

import Clipboard from 'clipboard';

clipboard的实际使用

不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象,如下:

mounted() {
  var copybtn = document.getElementsByClassName('btn')
  this.clipboard = new Clipboard(copybtn);
  }
<!--并不一定非要在mounted中也可以在其他周期内,

    只要页面已经加载完DOM即可,如果是动态生成可以使用nextTick中New。-->

绑定复制内容的方式有以下几种:

<!--第一种直接绑定在按钮上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
    @click="copy()">复制
    </button>
<!--第二种单个复制按钮动态获取需要复制的内容-->
<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0">
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>
<!--第三种可以在New Clipboard时设定要复制的内容-->
new Clipboard('copyBtn',function(){
  return <!--要复制的内容-->
})
copy(){
  let _this = this
  <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意-->
  clipboard.on('success', function () {
    Toast('复制成功')
    _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况-->
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('复制失败,请手动复制')
   })
  }

总结

以上所述是小编给大家介绍的Vue中使用clipboard实现复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
node.js 动态执行脚本
Jun 02 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php 生成短网址原理及代码
2014/01/23 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python实现微信自动回复功能
2018/04/11 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python实现手绘图效果实例分享
2020/07/22 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
python 制作磁力搜索工具
2021/03/04 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
行政经理的岗位职责
2013/11/23 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
厂长助理岗位职责
2013/12/27 职场文书
秋季运动会广播稿
2014/02/22 职场文书
聘任书格式及范文
2015/09/21 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python