一. 下载插件

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. #PowerBi 1分钟学会,powerbi中行列值拼接(COMBINEVALUES与CONCATENATEX)

    在日常的工作中,我们往往需要对表格数据的拼接,用来生成一些复合数据列,如下图类似场景. 其实,在powerbi中,我们同样也可以对表格文本进行拼接.今天我们就介绍两个DAX函数,COMBINEVALU ...

  2. 2022-02-11:单词缩写。 给定一个由n个不重复非空字符串组成的数组,你需要按照以下规则为每个单词生成最小的缩写。 初始缩写由起始字母+省略字母的数量+结尾字母组成。 若存在冲突,亦即多于一个单

    2022-02-11:单词缩写. 给定一个由n个不重复非空字符串组成的数组,你需要按照以下规则为每个单词生成最小的缩写. 初始缩写由起始字母+省略字母的数量+结尾字母组成. 若存在冲突,亦即多于一个单 ...

  3. 从前后端的角度分析options预检请求

    摘要:options预检请求是干嘛的?options请求一定会在post请求之前发送吗?前端或者后端开发需要手动干预这个预检请求吗?不用文档定义堆砌名词,从前后端角度单独分析,大白话带你了解! 本文分 ...

  4. vue请求后端数据和跨域问题

    最近遇到的一个问题 后端写好的接口,前端怎么获取数据 这是我后端的接口:GET 接口 这是我前端运行的项目地址: 简单使用: 咱门前端使用 颇受好评的 axios 来发起请求 这是它的官网:https ...

  5. 2013年蓝桥杯C/C++大学A组省赛真题(颠倒的价牌)

    题目描述: 小李的店里专卖其它店中下架的样品电视机,可称为:样品电视专卖店. 其标价都是4位数字(即千元不等). 小李为了标价清晰.方便,使用了预制的类似数码管的标价签,只要用颜色笔涂数字就可以了(参 ...

  6. 2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1,op2,… 可以是加、减、乘、除之一 例如

    2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1,op2,- 可以是加.减.乘.除之一 例如 ...

  7. 代码随想录算法训练营Day21 二叉树

    代码随想录算法训练营 代码随想录算法训练营Day21 二叉树| 530.二叉搜索树的最小绝对差 501.二叉搜索树中的众数 236. 二叉树的最近公共祖先 530.二叉搜索树的最小绝对差 题目链接:5 ...

  8. 园子的商业化努力-行行AI人才培养「常青藤计划」

    各位园子的小伙伴: 感谢大家长期对园子的支持,AI大模型出现之后,各行各业都在积极思考如何应对,如何把业务场景和AI结合.在这个过程中,AI人才缺乏是最核心的问题. 基于此,园子打算在AI人才培养方面 ...

  9. CMU15445 (Fall 2020) 数据库系统 Project#4 - Concurrency Control 详解

    前言 一个合格的事务处理系统,应该具备四个性质:原子性(atomicity).一致性(consistency).隔离性(isolation)和持久性(durability).隔离性保证了一个活跃的事务 ...

  10. React后台管理系统06 路由

    在src目录下新建2views文件夹,用来存放组件,这里我们新建2个路由组件Home About,如下所示: 创建好这两个路由组件之后,在src目录里面我们新建一个router路由文件夹,然后命名一个 ...