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中的DOM方法
Jul 16 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
vue常用高阶函数及综合实例
Feb 25 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
html读出文本文件内容
2007/01/22 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
三万活动总结
2014/04/28 职场文书
化工操作工岗位职责
2014/04/29 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
商务邀请函
2015/01/30 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Golang Web 框架Iris安装部署
2022/08/14 Python