解决使用 vue-clipboard2 完成一键复制功能时 点击复制按钮没有反应问题（无报错）

最新推荐文章于 2024-04-30 10:32:15 发布
最新推荐文章于 2024-04-30 10:32:15 发布
阅读量2.8k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37856464/article/details/116795124
版权

产生问题的原因是 绑定的值是undefined

解决方法：利用 || ，当 form.subject 的值是 undefined 的时候，将v-clipboard:copy 的值赋为 ' ' 。

<el-button
                  v-clipboard:copy="form.subject || ' '"
                  v-clipboard:success="onCopySuccess"
                  v-clipboard:error="onCopyError"
                  :disabled="false">复制</el-button>

 

不学无术小垃圾
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决clipboard.js在vue的弹窗组件中无效
qq_36391954的博客
04-27 5687
    最近有个需求，用户点击按钮会弹出一个弹窗，弹窗内会有一个复制按钮，点击该复制按钮会将url复制到剪贴板。    项目用的是用vue + quasar UI。我用quasar的Modal封装了一个弹窗组件，并在弹窗组件的mounted方法实例化一个clipboard实例。代码如下：import ClipboardJS from 'clipboard' ... mounted(){ le...
在Vue项目中 使用vue-clipboard2 实现复制到粘贴板的功能
01-07
场景： 在项目中，需要开发一个复制邀请码的功能，也就是点击复制按钮就将邀请码复制到粘贴板，直接粘贴即可。 使用到的是 vue-clipboard2 插件，简单又好用 首先，需要先安装这个插件 npm install --save vue-clipboard2 然后，在vue 项目中的 main.js 中引入 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' // 引入 Vue.use(VueClipboard) // vue全局使用插件 在具体页面使用，使用方法有两种： 其一： {{messag
复制内容显示navigator.clipboard undefined的问题与解决
最新发布
weixin_42190844的博客
04-30 1967
好久没写博客，太忙了。今天因为遇到复制文本的bug，在这里记录一下~
vue使用vue-clipboard2实现复制功能遇到的问题
Tiny2017的博客
11-26 5628
vue使用vue-clipboard2实现复制功能遇到的问题 今天遇到一个功能点需要点击table获取id再通过id获取url，然后复制这个url，然后尝试了各种方法都没有实现。第一个似的就是安装vue-clipboard2，但是搜到的都是很相似的的文章，但是自己试了完全没效果。 好在去了官方文档看了https://www.npmjs.com/package/vue-clipboard2 总算知道...
Clipboard在vue3复制不了，和点2次才成功问题解决方案
xuelang532777032的博客
11-30 3411
描述下问题： 博主原创，转载附上本博文链接 1、博主用的"clipboard": "^2.0.4", 2、vue3环境、复制的内容和按钮在动态组件里 ，复制内容异步生成 如果你的问题是如上我所描述在继续往下看 复制不了的问题 博主原来的代码如下 generateLink(promotionPath,type){ let m=this; let url=promotionPath if(type){//基础广告 url=`\<script src=\"`+pr.
vue 复制到剪切板 公共方法组件 clipboard 第一次没反应第二次成功
SanOrintea的博客
03-26 426
原理：clipboard是创建一个dom监听，然后点击dom时候复制并触发回调函数。所以第一次点击时候是创建监听，第二次点击才能被监听到。3、每次点击执行一遍创建监听->触发监听-> 销毁监听的整个生命周期，保证每次点击完毕后都卸载掉监听。1、不提出组件，在mounted中初始化创建监听（不使用，因为不方便提出公共方法组件）2、在每次点击时候多加一次点击（不推荐，不确定有无性能问题，毕竟创建了多个）背景：使用clipboard时候想提出组件，后续发现第一次没反应第二次成功。
解决clipboard.js在vue的弹窗组件中无效或者首次点击无效
GreyCastle的博客
11-14 3059
解决办法： 通过ref获取div元素 代码： <el-button ref="copy" :data-clipboard-text="复制该文字" type="primary" @click="copyCode" size="small">复制</el-button> mounted(){ //mounted中初始化实例，解决第一次复制不触发问题 let copyDomTxt=this.$refs['copy'].$el
nuxt-clipboard:使用vue-clipboard2的Nuxt.js的“复制到剪贴板”模块
05-01
Nuxt剪贴板 使用Nuxt.js的“复制到剪贴板”模块 :recycling_symbol: 设置使用yarn或npm将nuxt-clipboard依赖项添加到您的项目中添加nuxt-clipboard到modules的部分nuxt.config.js export default { modules : [ // ...
nuxt-clipboard:Nuxt.js 的“复制到剪贴板”模块，使用 vue-clipboard2
07-24
Nuxt.js 的“复制到剪贴板”模块，使用 :recycling_symbol: 设置 使用 yarn 或 npm 将nuxt-clipboard依赖项添加到您的项目中 添加nuxt-clipboard到modules的部分nuxt.config.js export default { modules : [ /...
在vue使用clipboard.js进行一键复制文本的实现示例
10-17
主要介绍了在vue使用clipboard.js进行一键复制文本的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
vue3剪贴板 Vue 3的绑定。 该存储库是Inndy用于Vue3的插件的端口。 安装 npm install --save @soerenmartius/vue3-clipboard 用法 全局导入v-clipboard指令 src/main.ts import { createApp } from 'vue' import...
Vue中使用clipboard实现复制功能
10-18
主要介绍了Vue中结合clipboard实现复制功能 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
clipboard.js在移动端复制失败的解决方法
12-01
1.前沿 一句话介绍下clipboard.js：实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。 在项目中使用clipboard.js插件去实现点击按钮，复制一段网址到剪切板的功能。功能做好后，一开始无论这pc端还是移动端都能正常使用。突然某一天测出了一个bug：移动端复制失败，pc端是ok的。简直一脸懵逼。。。 遇到这个bug，我第一个思考到的是，这是个常用的插件，网上应该有现成的解决方法。网友分享的方法是：把绑定data-clipboard-target属性的按钮标签从div换成button。亲测后，不起效果，可能不是一个原因导致的。通过摸索，找到了
vue-clipboard2 (clipboard.js) 详解及模态框组件中失效解决方案
张兴华的博客
09-06 5513
文章目录一、vue-clipboard2 (clipboard.js) 简介1、简介2、兼容性二、使用方法 Demo1、clipboard.js 的使用2、vue-clipboard2 的使用三、模态框(弹窗)组件失效问题clipboard.js 解决方案vue-clipboard2 解决方案 一、vue-clipboard2 (clipboard.js) 简介 1、简介 clipboard.js...
vue-clipboard2在vue的created生命周期中直接调用copyText方法报错的原因分析
CSU_Zipple的博客
11-07 5229
vue-clipboard2在vue的created生命周期中直接调用copyText方法报错 先说现象：在created生命周期中会进入reject状态（被catch到），不在生命周期的方法中调用而通过click事件来调用会正常进入resolved状态（成功进入then阶段）。 下面进行相关源码分析： 出错代码： created() { this.$copyText('asdasdasd...
Vue使用vue-clipboard2实现复制粘贴功能
weixin_44090040的博客
03-25 220
npm install --save vue-clipboard2 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) <button v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError"> 复制</button> data(){ retur
【非常好用的复制功能插件vue-clipboard2】
Min_Fox的博客
03-21 567
要实现功能是，点击按钮复制相对应的内容，复制到粘贴板，然后可以随意粘贴到任何地方。就是如此简单。
clipboard异步复制文本 vue
qq_41687724的博客
09-09 367
由于异步请求 不能直接拿到文本内容，所以第一次复制的时候是空的 讲下思路，就是新增一个按钮，按钮的真正功能是复制已请求到的文本内容，通过模拟点击复制到剪贴板。 下面是代码： <el-button@click="getLink(row.id)">链接</el-button> <el-buttonref="copy"class="btn":data-clipboard-text="linkUrl"@click="copyLink"style="opacity...
vue使用vue-clipboard2
09-20
vue-clipboard2是一个Vue.js插件，用于实现在Vue项目中复制文本内容或图片的功能。你可以通过安装和配置vue-clipboard2来使用它。 首先，你需要在你的项目中安装vue-clipboard2插件。可以使用npm或yarn命令来安装： ``` npm install vue-clipboard2 ``` 或 ``` yarn add vue-clipboard2 ``` 然后，在项目的main.js文件中引入vue-clipboard2插件，并配置autoSetContainer为true，以便自动设置复制容器： ``` import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true Vue.use(VueClipboard) ``` 接下来，你可以在你的Vue组件中使用v-clipboard指令来实现复制功能。例如，当点击一个div时复制相应的内容，可以按照以下方式编写代码： ```html <template> <div v-clipboard:copy="code" v-clipboard:success="onCopy" v-clipboard:error="onCopyError">点击复制</div> </template> ``` ```javascript data: function() { return { code: '我是复制的内容' } }, methods: { onCopy: function(e) { alert('复制内容 ' + e.text + '成功！'); }, onCopyError: function() { alert('您的手机系统不支持自动复制，请手动复制！'); } } ``` 这样，当点击该div时，相应的内容将被复制到剪贴板中，并触发相应的成功或失败回调函数。 如果你想复制图片，可以将img标签包装在一个div中，并在div上添加v-clipboard指令。例如： ```html <div v-clipboard:copy="code" v-clipboard:success="onCopy" v-clipboard:error="onCopyError"> <img src="xxxx" alt=" " /> </div> ``` 这样，当点击该div时，图片将被复制到剪贴板中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值