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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
python daemon守护进程实现
2016/08/27 Python
Python实现登录接口的示例代码
2017/07/21 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
七年级英语教学反思
2014/01/15 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
会计人员岗位职责
2014/03/19 职场文书
《观舞记》教学反思
2014/04/16 职场文书
基层党员公开承诺书
2014/05/29 职场文书
中国梦读书活动总结
2014/07/10 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
python spilt()分隔字符串的实现示例
2021/05/21 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android