经常遇到一键复制功能,简单记录一下。这里使用的是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. js 字符串格式化

    在js 文件中写一个函数 String.prototype.format = function(args) { var result = this; if (arguments.length > ...

  2. go语言从零学起(三) -- chat实现的思考

    要通过go实现一个应用场景: 1 建立一个websocket服务 2 维护在线用户的链接 3 推送消息和接受用户的操作 列出需求,很显然的想到了chat模型.于是研究了revel框架提供的sample ...

  3. Java基础-面向对象第二特征之继承(Inheritance)

    Java基础-面向对象第二特征之继承(Inheritance) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.继承的概述 在现实生活中,继承一般指的是子女继承父辈的财产.在程序 ...

  4. java中的悲观锁和乐观锁实现

    悲观锁就是认为并发时一定会有冲突发生,采用互斥的策略.比如java中的synchronized. 而乐观锁是假设并发时不会有冲突发生,如果发生冲突,则操作失败,并不断重试.乐观锁的机制就是CAS(Co ...

  5. 海思Hi3518A 海思Hi3518C 海思Hi3518E 这几个芯片都有什么区别么

    在3518A.3518C的基础上深化完善,推出了Hi3518E.作为新一代IP民用摄像机SoC,Hi3518E集成新一代ISP,优化了编码前图像处理算法,采用新一代H.264编码器.同时采用业内领先的 ...

  6. AT1983 BBQ Hard

    洛谷题目链接:BBQ Hard 题意翻译 有 n 个数对 \((A_i​; B_i​)\),求出 \[\sum_{i=1}^{n}\sum_{j=i + 1}^{n}{a_i+b_i+a_j+b_j ...

  7. ZeroMQ API(六) 代理

    1.zmq_proxy(3) 1.1 名称 zmq_proxy - 开始内置ZMQ代理 1.2 概要 int zmq_proxy(const void * frontend,const void * ...

  8. [整理]C语言中的static静态对象

    1.说明外部对象(静态外部变量和静态函数)    (1)static 用于说明外部变量或函数,使该对象的作用域限定为被编译原文件的剩余部分,即从对象说明开始到所在源文件的结束部分:    (2)被st ...

  9. 【JAVA】配置JAVA环境变量,安装Eclipse

    Java程序依赖JDK,就像C#程序依赖.NetFrameWork一样. 所以在开发之前,必须在win7或者是linux上,安装jdk(JavaDevelopkit)里面包括java一些工具,还有JR ...

  10. JS中数组那些事~

    今天闲的没事,看了一些关于数组的操作,好久木有用过,很多都已经忘记的差不多了,所以今天花了一个小时写了一些demo,准备备份一下方便以后使用~~~ 下面是一些工作当中,经常用到的数组的方法,小伙伴可以 ...