经常遇到一键复制功能,简单记录一下。这里使用的是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. 【Asp.net入门09】第一个ASP.NET 应用程序-处理窗体(1)

    我们创建了一个HTML窗体,可以通过它显示受邀参加晚会的嘉宾,但是,当嘉宾单击Submit RSVP按钮时,同一个页面会反复多次显示.为了解决此问题,需要实现一段代码,用于在将窗体数据发布到服务器时执 ...

  2. a标签--超链接

    一.链接到其他网站 <body> <a href="https://www.baidu.com" target="_blank">百度& ...

  3. solr6.3.0升级与IK动态词库自动加载

    摘要:对于中文的搜索来说,词库系统是一个很比较重要的模块,本篇以IK分词器为例子,介绍如何让分词器从缓存或文件系统中自动按照一定频次进行加载扩展词库 Lucene.Solr或ElasticStack如 ...

  4. Mac 上配置 PhpMyAdmin

    一.配置自带的 apache 服务器环境 由于 PHP apache 环境在 Mac OS上是自带的,所以不需要另处下安装包,只需要简单配置一下即可.首先打开终端输入命令: sudo vim /etc ...

  5. U40620 还没想好名字的题

    U40620 niiickの还没想好名字的题 给定一个长度为\(n\)的序列\(a_1,a_2...,a_n\) 要求将这\(n\)个数分为\(m\)组,每组可以有任意多个数,但同一组中的数必须是原序 ...

  6. Camera ISO、快门、光圈、曝光这几个概念

    转载自知乎:https://www.zhihu.com/question/21427664 种田要知节气,开车要懂离合,任何一样手艺都有行话.虽然我觉得尽量从实际问题说起,尽量不要说的很专业,但有几个 ...

  7. [转载]WCF和ASP.NET Web API在应用上的选择

    http://www.cnblogs.com/shanyou/archive/2012/09/26/2704814.html http://msdn.microsoft.com/en-us/libra ...

  8. Nginx upstream的5种权重分配方式【转】

    原文地址:Nginx upstream的5种权重分配方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight指定轮询几率,weig ...

  9. App劫持病毒剖析:你的应用是如何被替换的(病毒防范方法)

    App劫持病毒剖析:你的应用是如何被替换的(病毒防范方法) 一.App劫持病毒介绍 App劫持是指执行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数执行劫持等.本文将对近期利用A ...

  10. 10 Useeful Tips for Writing Effective Bash Scripts in Linux

    1.Always Use Comments in Scripts2.Make a Scripts exit When Fails    Sometimes bash may continue to e ...