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代码
Feb 11 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
基于python实现坦克大战游戏
2020/10/27 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
一道Delphi上机题
2012/06/04 面试题
应付会计岗位职责
2013/12/12 职场文书
代理协议书范本
2014/04/22 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
实习协议书范本
2014/09/25 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
道歉信怎么写
2015/05/12 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书