Vue实现剪贴板复制功能


Posted in Javascript onDecember 31, 2019

小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能 (注: 依赖第三方插件 clipboard)

一. 安装插件

第一种直接npm安装: npm install clipboard --save

   第二种:  <script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.com/)

二. 全局注入(main.js)

import VueClipboard from 'vue-clipboard2'

  Vue.use(VueClipboard)

三. 封装方法方便多次使用

新建一个index.js文件里面存放项目会多次使用的方法

export default{
  install(Vue,opstion){
    //把方法写在vue原型方便调用
   Vue.prototype.copy = function (value) {
    this.$copyText(
     `${value}`
    ).then( res => {
     //这是element的Message 消息提示组件
      this.$message({
       message: "复制成功",
       type: "success"
      });
     },
     err => {
      this.$message.error("复制失败");
     }
    );
   },
  }
}

四. 在需要复制的页面中调用copy方法

<template>
     <el-tooltip class="item" effect="dark" content="复制" placement="bottom">
       <i class="icon copy iconfont" @click.stop="copyCode()">?</i>
     </el-tooltip>
    </template>
    
    <script>
    
    //直接调用copy方法就可以了
      copyCode(scope) {
      //把需要复制的内容传value
         this.copy(scope.row.date);
       },
    </script>

总结

以上所述是小编给大家介绍的Vue实现剪贴板复制功能,希望对大家有所帮助!

Javascript 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 #Javascript
小程序外卖订单界面的示例代码
Dec 30 #Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 #Javascript
JS三级联动代码格式实例详解
Dec 30 #Javascript
JavaScript监听触摸事件代码实例
Dec 30 #Javascript
微信公众号服务器验证Token步骤图解
Dec 30 #Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
初识Laravel
2014/10/30 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
jQuery响应enter键的实现思路
2014/04/18 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
Python随机数random模块使用指南
2016/09/09 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python理解递归的方法总结
2019/01/28 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python 弧度与角度互转实例
2020/04/15 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
工程监理应届生求职信
2013/11/09 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
企业宣传标语
2014/06/09 职场文书
医学求职自荐信
2014/06/21 职场文书
大学军训通讯稿
2015/07/18 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python