待实践的解决方案---微信浏览器里粘贴功能不好使

本文介绍了一种在微信浏览器中实现一键复制功能的方法,解决了数字码不便记忆的问题,尤其是在集体产品认养场景下,通过使用v-clipboard插件,实现了下单识别码的一键复制,但遇到微信浏览器粘贴功能的限制,提出了通过添加提示文字和利用focus事件的解决方案。

做时间岛的时候有一种类型是集体产品
第一个人认养了会生成一个码,这个人把码分享给别人,后面的人通过这个码来认养这个集体产品

这个码我们决定显示在订单页面和支付页面,但是由于码是纯数字构成,不方便记忆,所以需要有一个一键复制的功能

这个好办,引入一个插件就行了,忘记叫啥了,后面找到了再补上

然后页面里就这么写就行了

<div class="duration-item" v-show="detail.identifyCode"><span class="name">下单识别码:</span><span>{{detail.identifyCode}} <button class="copy"
                                                                                                             v-clipboard:copy="detail.identifyCode"
                                                                                                             v-clipboard:success="onCopy"
                                                                                                             v-clipboard:error="onError">一键复制</button></span></div>

js里写两个方法,一个onCopy,一个onError

onCopy: function (e) {
    this.toastText = '复制成功';
    this.$refs.toast.show();
},
onError: function (e) {
    this.toastText = '无法复制文本';
    this.$refs.toast.show();
},

至于v-clipboard:copy里面就是你要复制的内容啦,这里我需要复制的下单识别码是detail.identifyCode,所以我要复制的也是这个

这样就复制到手机的剪切板里了,说得很啰嗦,执行起来很容易

但是粘贴就出问题了

我以为直接粘贴就行了,但是好死不死的微信浏览器里粘贴不好使

有个待实践的解决方案,值得一试

安卓上微信版本6.7.2上这个问题是没有的,升了一个小版本号就开始出现这个问题,怀疑是微信客户端的bug。解决方法倒是有个不合理的,因为如果input或者textarea中有文字的话,就可以长按出现剪切这种选择,所以可以在这些表单标签中添加一些提示文字,然后通过focus事件在获取焦点的时候直接选中文字,然后在长按出现复制选项。然而,我这边客户嫌麻烦所以我还没找到好方法

感谢@seedada

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值