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原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
python3处理含有中文的url方法
2018/05/10 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python数学形态学实例分析
2019/09/06 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python如何快速生成时间戳
2020/07/21 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
初二物理教学反思
2014/01/29 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
《阳光》教学反思
2014/02/23 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js