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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
原生js 秒表实现代码
Jul 24 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
虫族 ZERG 概述
2020/03/14 星际争霸
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php include和require的区别深入解析
2013/06/17 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
javascript canvas封装动态时钟
2020/09/30 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python3实现猜数字游戏
2020/12/07 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
万能检讨书2000字
2014/10/17 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
公务员个人考察材料
2014/12/23 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS