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 相关文章推荐
禁止空格提交表单的js代码
Nov 17 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
手机端转换rem适应
Apr 01 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 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
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
javascript动态加载三
2012/08/22 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python不同版本的_new_不同点总结
2020/12/09 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
公务员考察材料范文
2014/12/23 职场文书
实习生个人总结范文
2015/02/28 职场文书
在人间读书笔记
2015/06/30 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers