clipboard在vue中的使用的方法示例


Posted in Javascript onOctober 19, 2018

简介

页面中用 clipboard 可以进行复制粘贴,clipboard能将内容直接写入剪切板

安装

npm install --save clipboard

使用方法一

<template>
    <span>{{ code }}</span>
    <i
    class="el-icon-document"
    title="点击复制"
    @click="copyActiveCode($event,code )"/>
</template>
// methods
copyActiveCode(e, text) {
   const clipboard = new Clipboard(e.target, { text: () => text })
   clipboard.on('success', e => {
    this.$message({ type: 'success', message: '复制成功' })
    // 释放内存
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
   })
   clipboard.on('error', e => {
    // 不支持复制
    this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
    // 释放内存
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
   })
   clipboard.onClick(e)
  }

使用方法二

<template>
    <span>{{ code }}</span>
    <i
    id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
    :data-clipboard-text="code" <-- 这里放要复制的内容 -->
    class="el-icon-document"
    title="点击复制"
    @click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
   const clipboard = new Clipboard("#tag-copy")
   clipboard.on('success', e => {
    this.$message({ type: 'success', message: '复制成功' })
    // 释放内存
    clipboard.destroy()
   })
   clipboard.on('error', e => {
    // 不支持复制
    this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
    // 释放内存
    clipboard.destroy()
   })
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
小谈angular ng deploy的实现
Apr 07 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
You might like
discuz目录文件资料汇总
2014/12/30 PHP
隐性调用php程序的方法
2015/06/13 PHP
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python实时监控logstash日志代码
2020/04/27 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
晚宴邀请函范文
2014/01/15 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
门店店长岗位职责
2015/04/14 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技