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 相关文章推荐
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
php实现微信支付之退款功能
2018/05/30 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python psutil模块简单使用实例
2015/04/28 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python的命名规则知识点总结
2019/10/04 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python换行与不换行的输出实例
2020/02/19 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
遇到的Mysql的面试题
2014/06/29 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
新娘婚礼致辞
2015/07/27 职场文书
网吧员工管理制度
2015/08/05 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript