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 相关文章推荐
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
javascript 闭包详解
Jul 02 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
JavaScript类的写法
Sep 17 Javascript
js实现网页定位导航功能
Mar 07 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
php的ajax简单实例
2014/02/27 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
VUE前端cookie简单操作
2017/10/17 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
购房个人委托书范本
2014/10/11 职场文书
工作失误检讨书
2015/01/26 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
Redis基本数据类型String常用操作命令
2022/06/01 Redis