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中清空数组的三种方法分享
Apr 07 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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
用Flash图形化数据(一)
2006/10/09 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
js调用flash的效果代码
2008/04/26 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python 基础教程之包和类的用法
2017/02/23 Python
Python 统计字数的思路详解
2018/05/08 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python输入错误后删除的方法
2019/10/12 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python实现按日期归档文件
2021/01/30 Python
C#基础面试题
2016/10/17 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
花店创业计划书范文
2014/02/07 职场文书
语文课外活动总结
2014/08/27 职场文书
支部书记四风对照材料
2014/08/28 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
使用Python拟合函数曲线
2022/04/14 Python