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 SetInterval与setTimeout使用方法详解
Nov 15 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
vuex存储token示例
Nov 11 Javascript
用JavaScript实现贪吃蛇游戏
Oct 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
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
laravel请求参数校验方法
2019/10/10 PHP
js加解密 脚本解密
2008/02/22 Javascript
js中eval详解
2012/03/30 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Unicode和Python的中文处理
2017/03/19 Python
Python遍历numpy数组的实例
2018/04/04 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
办公室主任职责范文
2013/11/08 职场文书
销售实习自我鉴定
2013/12/07 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
索赔员岗位职责
2015/02/15 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
在校生证明
2015/06/17 职场文书
礼仪培训心得体会
2016/01/22 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL