一. 下载插件

npm install --save vue-clipboard2

二. main.js

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

三. 使用

html部分 点击查看代码
<el-button
size="mini"
type="text"
icon="el-icon-document-copy"
v-clipboard:copy="scope.row.productName"
v-clipboard:success="productNameCopySuccess"
v-clipboard:error="productNameCopyError"
>复制名称</el-button
>
js部分 点击查看代码
    productNameCopySuccess(e){
this.$modal.msgSuccess("复制名称成功,内容如下: "+ e.text);
},
productNameCopyError(e){
this.$modal.error("复制名称失败");
},

vue实现文本复制的更多相关文章

  1. js文本复制插件&vue

    /* HTML: * <a href="javascript:;" class="copy" data-clipboard-text="copy ...

  2. 用FileInputStream实现文本复制

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; /* * 用f ...

  3. JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...

  4. js-将文本复制到剪切板

    // 将文本复制到剪切板 var clipboard2 = new ClipboardJS('.add_wx_guide_float', { text: function(trigger) { ret ...

  5. vue单位文本控件与vue加密文本控件

    vue单位文本控件: 使用方式: npm install dami-text-input --save 使用: <text-input v-model="test" :uni ...

  6. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  7. iOS-开发将文本复制到剪切板

    下面方法可以将文本复制到剪切板 UIPasteboard *pboard = [UIPasteboard generalPasteboard]; pboard.string = @"邀请码& ...

  8. vue点击复制文本粘贴

    <template>  <ul>      <li> <input type="text" class="inpNone&quo ...

  9. vue 富文本编辑器 项目实战用法

    1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...

  10. ZeroClipboard 插件实现文本复制到剪贴板

    ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...

随机推荐

  1. golang在编程语言排行榜上排名第10,请不要说golang已死。

    四月头条:编程语言 Zig 进入 TIOBE 指数前 50 名 最近,我们讨论了高性能编程语言的出现.由于需要处理的数据量越来越大,这些编程语言正在蓬勃发展.因此,C 和 C++ 在前十名中表现良好, ...

  2. 2022-12-19:大的国家。如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者 人口至少为 2500 万(即 250000

    2022-12-19:大的国家.如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者 人口至少为 2500 万(即 250000 ...

  3. 2022-10-30:给你一个长度为 n 的整数数组 rolls 和一个整数 k 。 你扔一个 k 面的骰子 n 次,骰子的每个面分别是 1 到 k , 其中第 i 次扔得到的数字是 rolls[i]

    2022-10-30:给你一个长度为 n 的整数数组 rolls 和一个整数 k . 你扔一个 k 面的骰子 n 次,骰子的每个面分别是 1 到 k , 其中第 i 次扔得到的数字是 rolls[i] ...

  4. OneForAll下载安装以及环境配置

    python-3.9.7-amd64 OneForAll-master python安装以及插件安装 首先下载python解压到电脑c盘在c盘中创建一个工具文件夹,然后下载OneForAll-mast ...

  5. K2C V21.4.6.12刷breed教程

    K2C V21.4.6.12刷breed教程(刷机方法源自qiao99) 原贴地址:K2C V21.4.6.12刷breed记录 http://www.right.com.cn/forum/threa ...

  6. 在DevExpress的GridView的列中,使用RepositoryItemSearchLookUpEdit控件实现产品列表信息的展示和选择

    有时候,我们为了方便,我们往往使用扩展函数的代码方式创建很多GridView的操作功能,如在随笔<在DevExpress中使用BandedGridView表格实现多行表头的处理>中介绍过多 ...

  7. Spring事件监听机制使用和原理解析

    你好,我是刘牌! 前言 好久没有更新Spring了,今天来分享一下Spring的事件监听机制,之前分享过一篇Spring监听机制的使用,今天从原理上进行解析,Spring的监听机制基于观察者模式,就是 ...

  8. 从源码级剖析Java类加载原理

    相信大多数熟悉Java的研发工程师,都知道Java类加载原理:Java中的类是由类加载器采用双亲委派机制进行加载.其中,Java核心库中实现了三种类型的类加载器,它们分别是:引导类加载器Bootstr ...

  9. pcie reset系列之 内核框架

    FLR是pci reset的一种. 关于FLR的寄存器操作比较简单, 相关的寄存器有: 配置空间里device cap里的FLR capability bit, 这个表示设备是否支持FLR. 配置空间 ...

  10. tvm-多线程代码生成和运行

    本文链接 https://www.cnblogs.com/wanger-sjtu/p/16818492.html 调用链 tvm搜索算子在需要多线程运行的算子,是在codegen阶段时插入TVMBac ...