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模板来展现json数据的代码
Oct 22 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JS 数字转换研究总结
Dec 26 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
jQuery手风琴的简单制作
May 12 jQuery
Angularjs自定义指令Directive详解
May 27 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
详解ES7 Decorator 入门解析
Feb 18 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的SQL注入过程分析
2012/01/06 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php判断linux下程序问题实例
2015/07/09 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
javascript 写类方式之三
2009/07/05 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python三级菜单的实例
2017/09/13 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
超市开学活动方案
2014/03/01 职场文书
法学自荐信
2014/06/20 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python