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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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学习教程之第2天
2008/06/15 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
网页javascript精华代码集
2007/01/24 Javascript
javascript 常用方法总结
2009/06/03 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
javascript轮播图算法
2016/10/21 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
python中 logging的使用详解
2017/10/25 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
高二历史教学反思
2014/01/25 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
婚礼主持结束词
2014/03/13 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Django rest framework如何自定义用户表
2021/06/09 Python