经常遇到一键复制功能,简单记录一下。这里使用的是clipboard插件:https://clipboardjs.com/

  第一步

    安装:npm install clipboard --save

  第二步: 

    引入:

      import clipboard from 'clipboard';
      Vue.prototype.clipboard = clipboard;

  第三步:

    使用:

      <button data-clipboard-action="copy" class="cobyDomObj" :data-clipboard-text="复制内容" @click="copyLink">
        复制按钮
      </button>

      copyLink() {
        let _this = this;
        let clipboardObj = new this.clipboard(".cobyDomObj");
        clipboardObj .on('success', function () {
          _this.$toast("复制成功")
        });
        clipboardObj .on('error', function () {
          _this.$toast("复制失败")
        });
      }

  

一键复制功能 - Vue的更多相关文章

  1. (英文版)VScode一键生成.vue模板

    1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...

  2. js插件实现一键复制功能

    clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: htt ...

  3. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  4. 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...

  5. JS实现一键复制功能

    var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...

  6. cocos2dx 实现文字的一键复制功能(IOS、Android)

    1.IOS篇(用OC和C++混编) 头文件声明: public static void copy(std::string str); 实现如下: void copy(std::string str) ...

  7. H5 页面 上使用js实现一键复制功能

    2.解决苹果手机浏览器 无法使用的问题  上面的方法在 iphone 手机 safari浏览器失效的问题 其实就是使用输入框先显示然后模拟选择复制在隐藏输入框

  8. vscode vue 模版生成,vue 一键生成

    vscode vue 模版 继上篇文章(vue 格式化),顺便记录下 vue 模版生成.图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章. 一.安装 VueHelper 在 vs ...

  9. vue学习第一天 ------ 临时笔记

    学习链接 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 http://blog.csdn.net/fungleo/article/detai ...

随机推荐

  1. Mongodb 笔记04 特殊索引和集合、聚合、应用程序设计

    特殊索引和集合 1. 固定集合:固定集合需要事先创建好看,而且它的大小是固定的.当固定集合被占满时,如果再插入新文档,固定集合会自动将最老的文档从集合中删除. 2. 创建固定集合:db.createC ...

  2. [POI2007]Zap

    bzoj 1101: [POI2007]Zap Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Descriptio ...

  3. codevs 1500 后缀排序

    codevs 1500 后缀排序 http://codevs.cn/problem/1500/  时间限制: 1 s  空间限制: 128000 KB   题目描述 Description 天凯是MI ...

  4. 用 Love2D 实现法线贴图的例程(到最新版本 0.10.1)

    用 Love2D 实现法线贴图的例程(到最新版本 0.10.1) 概述 一般来说, 复杂的光照模型会被用在 3D 游戏中, 以产生逼真的效果, 不过也有些开发者研究出一些代码可以在 2D 游戏中使用这 ...

  5. [洛谷P3292] [SCOI2016]幸运数字

    洛谷题目链接:[SCOI2016]幸运数字 题目描述 A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城 ...

  6. Android SDK更新失败对策

    Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml Failed to fetch URL https:// ...

  7. shell学习1---基本的shell命令

    基本脚本 反引号: ``  反引号里面的内容是命令行,通过反引号用户可以将shell命令的输出赋给变量,比如: test=`date +%y%m%d` echo "The time is : ...

  8. win7启动apache-activemq报错及解决办法

    win7启动apache-activemq报错,如下: jvm 1 |jvm 1 | Java Runtime: Oracle Corporation 1.8.0_74 C:\Program File ...

  9. <转>Android APP字体大小,不随系统的字体大小变化而变化的方法

    从android4.0起系统设置的”显示“提供设置字体大小的选项.这个设置直接会影响到所有sp为单位的字体适配,所以很多app在设置了系统字体后瞬间变得面目全非.下面是解决方案 Resources r ...

  10. 创建分区swap分区

    1.将文件系统卸载 #umount /sdc5 2.创建swap分区 #mkswap /dev/sdc5 3.激活swap分区 #swapon -a /dev/sdc5 4.查看swap分区情况 #s ...