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 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js中文逗号转英文实现
Feb 11 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
js实现按座位号抽奖
Apr 05 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 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
杏林同学录(五)
2006/10/09 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Vue分页器实现原理详解
2019/06/28 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python WindowsError的错误代码详解
2017/07/23 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
学习python分支结构
2019/05/17 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
房屋买卖协议书
2014/04/10 职场文书
求职自我推荐信
2014/06/25 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
Ruby处理YAML和json数据
2022/04/18 Ruby