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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
安装vue-cli的简易过程
May 22 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
详解在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递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python 表格打印代码实例解析
2019/10/12 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python 实现微信自动回复的方法
2020/09/11 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
小学生自我鉴定
2013/10/12 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
六年级学生期末评语
2014/12/26 职场文书
助学金感谢信
2015/01/20 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
JavaScript执行机制详细介绍
2021/12/06 Javascript