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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
AngularJs中$cookies简单用法分析
May 30 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
PHP实现用户认证及管理完全源码
2007/03/11 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Git命令之分支详解
2021/03/02 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python队列Queue的详解
2019/05/10 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
Linux机考试题
2015/10/16 面试题
班主任与学生安全责任书
2014/07/25 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
市场部岗位职责
2015/02/12 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
python实现网络五子棋
2021/04/11 Python
详解Python函数print用法
2021/06/18 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android