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动画效果类封装代码
Aug 28 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
理解jQuery stop()方法
Nov 21 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
javascript 函数式编程
2007/08/16 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
js实现黑白div块画空心的图形
2018/12/13 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python中实现控制小数点位数的方法
2019/01/24 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python自定义函数def的应用详解
2020/06/03 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
大学生两会学习心得体会
2014/03/10 职场文书
岗位明星事迹材料
2014/05/18 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript