最近处理了一个点击复制按钮,复制文本的功能, 百度了一通,有用clipboard这个插件的, 有用css的, 有用dom的select方法的. 这里我选择了dom的select方法.
参考链接: 前端vue.js实现点击复制功能（完美解决移动端可用）
介绍一下,select() 方法用于选取文本域中的内容, 我的理解就是用于input的type为text的情况, 或者说是textarea.
因为我的需求是展示一个优惠码, 如果用Input来做展示的话, input的宽度是固定的,没法随着内容来自适应宽度. 一开始我想到了用Input的hidden,但是不行, 后来我又尝试把input display: none, 以及 visibility:hidden, 都不行, 后来用 opacity:0, 可以. 然后我把input的宽度设为0, 又不行了, 至少要给1px的宽度.然后用一个其他的标签, span, p等, 来展示优惠码的内容. 可以同时满足这个需求在功能和样式上的要求.
如果你要使用点击复制功能但是不想使用Input框来做展示, 需要注意以下几点:
selec()方法只能用于
input, type="text"和textarea(type="hidden"没用)display:none; visibility:hidden;无法执行浏览器的复制方法opacity:0可以使用, 浏览器的复制方法仍然生效input的宽度最小为1px
代码如下:
<!-- html代码 --><input class="opacity0 w10" id="couponCode" :value="coupon.couponNum" readonly /><span class="ml6 fw400" >{{ coupon.couponNum }}</span><van-button click="copy('couponCode')">复制</van-button >
// js 代码copy(id) {var copycode = document.getElementById(id)console.log(copycode)copycode.select() // 选择对象document.execCommand('Copy') // 执行浏览器复制命令this.$toast('复制成功')}
效果如下:
