经常遇到一键复制功能,简单记录一下。这里使用的是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. bzoj 2055 80人环游世界

    有源汇上下界最小费用可行流. 将每个国家拆点. 源点向一个新建节点连一条上界为总人数下界为0费用为0的边. 新建节点向每个国家的入点连一条上界为正无穷下界为0费用为0的边. 每个国家的入点向出点连一条 ...

  2. python3中SSLError错误处理

    在deepin中安装了python3.6,安装路径为/usr/local/python36,然后通过deepin自带的python2.7的pip安装了virtualenv: sudo pip inst ...

  3. Ansible4:Ad-hoc与命令执行模块

    目录 Ad-hoc 命令说明 后台执行 命令执行模块 command模块 script模块 Ad-Hoc 是指ansible下临时执行的一条命令,并且不需要保存的命令,对于复杂的命令会使用playbo ...

  4. 并发库应用之三 & 线程池与定时器应用

    在TCP服务器编程模型的原理,每一个客户端连接用一个单独的线程为之服务,当与客户端的会话结束时,线程也就结束了,即每来一个客户端连接,服务器端就要创建一个新线程.如果访问服务器的客户端很多,那么服务器 ...

  5. jquery中的$.each跳出循环并获取返回值

    jquery中使用each方法,类似于while或者for循环 一种退出循环的方式是:当数据全部被遍历完成,自然退出, 另一种方法是:当我们在循环中返回一个false时,会跳出循环 这里来使用第二种方 ...

  6. vue 开发过程中遇到的问题

    1. gitlab团队协作开发 2. element ui 问题集锦 3. 使用vue和ElementUI快速开发后台管理系统

  7. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  8. 高效使用jquery之一:请使用'On'函数

    on函数是在jquery 1.7 加入的 描述: 在选定的元素上绑定一个或多个事件处理函数. 定义:.on( events [, selector ] [, data ], handler(event ...

  9. Hadoop/Spark环境运行过程中可能遇到的问题或注意事项

    1.集群启动的时候,从节点的datanode没有启动 问题原因:从节点的tmp/data下的配置文件中的clusterID与主节点的tmp/data下的配置文件中的clusterID不一致,导致集群启 ...

  10. HDU 1181 变形课 (深搜)

    题目连接 Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形 ...