一. 下载插件

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. 【自用】无限级分类获取SQL语句

    自定义函数: 1 USE [ExpenseCenter_Fibrogen] 2 GO 3 /****** Object: UserDefinedFunction [dbo].[GetSubordina ...

  2. 2020-09-11:Hive的优化策略有哪些?

    福哥答案2020-09-11: [Hive调优及优化的12种方式](https://zhuanlan.zhihu.com/p/80718835?utm_source=qq)1.请慎重使用COUNT(D ...

  3. 2020-12-15:mysql的回滚机制是怎么实现的?

    福哥答案2020-12-15:[答案来自此链接:](https://www.cnblogs.com/ld-swust/p/5607983.html)在 MySQL 中,恢复机制是通过回滚日志(undo ...

  4. 2022-04-27:Alice 有一个下标从 0 开始的数组 arr ,由 n 个正整数组成。她会选择一个任意的 正整数 k 并按下述方式创建两个下标从 0 开始的新整数数组 lower 和 hig

    2022-04-27:Alice 有一个下标从 0 开始的数组 arr ,由 n 个正整数组成.她会选择一个任意的 正整数 k 并按下述方式创建两个下标从 0 开始的新整数数组 lower 和 hig ...

  5. 2021-04-29:给定一个数组 arr,代表一排有分数的气球。每打爆一个气球都能获得分数,假设打爆气 球 的分数为 X,获得分数的规则如下: 1)如果被打爆气球的左边有没被打爆的气球,找到离被打爆

    2021-04-29:给定一个数组 arr,代表一排有分数的气球.每打爆一个气球都能获得分数,假设打爆气 球 的分数为 X,获得分数的规则如下: 1)如果被打爆气球的左边有没被打爆的气球,找到离被打爆 ...

  6. Selenium - 模拟键盘鼠标操作

    Selenium - 模拟键盘鼠标 鼠标操作 当出现由 Selenium 的 click 无法进行操作,或者需要对元素进行拖拽等操作时,可以采用鼠标模拟人工操作: from selenium impo ...

  7. y总算法基础课+算法提高课+算法进阶课超全模板

    y总超全算法模板 y总模板自取 喜欢的可以点个赞支持一下^-^ 模板展示

  8. 时隔多年,从新认识浮动float

    开场白 随着css的发展,在加上各种优秀ui库的兴起. 我们在项目中浮动用的很少. 但并不意味着我们不使用浮动了. 曾几何时,浮动这个属性是那个遥远时代的'超级明星' 排版,布局,都需要使用他. 今不 ...

  9. CF1817E Half-sum 另解与 Trygub Number

    一题水两篇怎么说. 上一篇中我们采用智慧方法减少了比较次数,避免了使用复杂的高精度数.现在我们有高论!可以做到 \(\mathrm O(\log_B V\log_2 n)\) 在某一位加或者减一个大小 ...

  10. 让AI支持游戏更自然、更直观:基于情感分析的AI游戏体验和交互设计

    目录 引言 随着游戏市场的不断发展,人工智能技术的应用也越来越广泛.其中,情感分析技术在游戏中的应用,可以让游戏更加自然.直观,同时提高游戏的用户体验.本文将介绍如何让 AI 支持游戏更自然.更直观: ...