首页 > 其他分享 >vue实现文本复制

vue实现文本复制

时间:2023-07-18 21:45:14浏览次数:25  
标签:vue clipboard2 js modal 复制 VueClipBoard 文本

一. 下载插件

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,clipboard2,js,modal,复制,VueClipBoard,文本
From: https://www.cnblogs.com/wangzaiting/p/17396591.html

相关文章

  • vue3+vite4实现动态引入图片
    本来是想使用vue2时使用的require,但是在运行时却突然报错:看到上面的报错让我很懵,require为啥不能使用呢??经过我不懈的努力,终于找到原因:在Vue3和Vite4中,不再推荐使用CommonJS的require语法,而是使用ECMAScript模块(ESM)的import语法。Vite4默认支持ESM,因此在使用......
  • 在线 - 支持word上传的富文本编辑器
    ​ 当前功能基于PHP,其它语言流程大致相同 1.新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的......
  • vue - 图片的放大镜功能
    //html<divclass="productLeft"><!--左侧中图--><divclass="mdImg"><img:src="qall"alt=""></div><!--遮罩层--><divv-show="isShow"class=&qu......
  • vue手搓h5滚动日期选择器组件
    背景新项目为了省事和后台写一起了,所以用不了Uni-app(悲),然后element-ui的日期选择器h5不适配,看着也难受,就想找个好用的,结果找了一圈感慨,自己写个吧。 说明 为了加快速度,代码可能有些臃肿,但大概就是这样了,看着代码好多,其实只要会一个的滚动就会多个了。建议下看下参考文章,然后......
  • vue+zxing 扫描条形码
    背景扫描甲方商品身上的条形码。吐槽下:这玩意又细又小,还反光,最后用的uni-app上的插件,而且不用自己封装了。虽然和我之前的二方案差不多,即使用Quagga,打开video,将每帧画成canvas,然后转换为图片交给Quagga识别,缺点是功耗大,最后实装的表现还行,就是扫几个码,手机热了。回归正题,最开......
  • vue使用hiprint实现打印(vue-plugin-hiprint)
    1、安装插件:npminstallvue-plugin-hiprint或yarnaddvue-plugin-hiprint2、普通使用:<template><divclass="box"><divclass="box-tool"><el-button-group><el-buttontype="primary......
  • vue v-if 和v-permission 共同使用的奇怪问题
    背景后台系统某功能按钮需要订单状态和用户权限共同校验是否显示,将权限校验和v-if共同作用在同一div中,下方为实例代码<divv-if="status==0"><div@click="function1">某按钮功能</div></div><divv-if="status==1"v-permission="['admin......
  • antd+vue3 tree-select 组件库 筛选结果不正确的问题
    第一次遇到这种带搜索框的下拉树状列表搜索关键字的时候出现我不想要的结果。我感觉组件它只是搜索一级列表而没有搜索二级列表,然后一节列表把它整个的二级列表带出来了。二级列表里边包含搜索关键字的所有item才是我想要的。相关代码:1<!--页面名称-->2<div......
  • vue 小写转大写方法
    好久好久没更新了啊,其实有好多可以写的,但是不知道为啥不想写了方法一://输入的金额进行大写转换functiontransformation(val){varfraction=["角","分"];vardigit=["零","壹","贰","叁","肆","伍","陆"......
  • KindEditor - 支持word上传的富文本编辑器
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......