上海网站分站建设,wordpress 外部链接,网站app简单做,昆明有网站的公司最近项目中做一个很常见的复制粘贴的功能耽误了比较长的时间特此记录#xff0c;在往常这个功能直接用 clipboard 做就行了#xff0c;但是这次却发现复制功能不好使了#xff0c;虽然走了复制成功的回调#xff0c;但是粘贴板并没有复制的内容。代码如下
div v-for在往常这个功能直接用 clipboard 做就行了但是这次却发现复制功能不好使了虽然走了复制成功的回调但是粘贴板并没有复制的内容。代码如下
div v-foritem in arr...van-button v-ifstatus classcopybtn :data-clipboard-textitem.link 复制/van-button...
/div
我们这个复制按钮默认是隐藏的用户操作之后才会出来经过一番查询之后有文章指出复制按钮初始化的时候元素必须存在并且不能 display:none的方式隐藏。 然后修改修改代码逻辑 按照文章指出的问题 v-if 换成v-show 也是不好使的于是利用heigh0来隐藏元素。测试环境测试ok。
本以为就此结束后来上线发现ios safari 还是不行而且仅在线上环境复现。我一直觉得clipboardjs 这么常用的库应该不会有问题应该是用法的问题但因为本地的代理工具除了问题无法抓包ios调试。给排查问题造成了较大的困难。经过几次调整尝试后仍然无法解决而且耽误较多的时间。于是转换思路利用原生复制功能双管齐下但发现原生的navigator.clipboard 虽然是标准仍然有兼容性问题安卓真机复制失败。于是有加上兼容性更好但标准废弃的document.execCommand 最终解决了问题针机测试ok。代码实现如下
van-button classcopybtn :class{hidden:status0} :data-clipboard-textitem.link clickcopyToClipboard(item.link)复制/van-button
export default {mounted(){this.$nextTick((){var clipboard new Clipboard(.copybtn);clipboard.on(success, (e) {this.$toast.success(复制成功);e.clearSelection();});clipboard.on(error, e {this.$toast.fail(复制失败);});}) },methods:{copyToClipboard(text) {navigator.clipboard.writeText(text).then(() {this.$toast.success(复制成功);console.log(复制成功[navigator.clipboard], text);}).catch(err {console.error(复制失败, err);this.copyForExecCommand(text) //复制失败用改用document.execCommand});},copyForExecCommand(text) {// 创建临时 textarea 元素const textarea document.createElement(textarea);textarea.value text;textarea.setAttribute(readonly, ); // 设置为只读防止 iOS 设备出现问题textarea.style.position absolute;textarea.style.left -9999px; // 将其放在屏幕外面document.body.appendChild(textarea);// 选择并复制内容到剪贴板textarea.select();document.execCommand(copy);// 移除临时元素document.body.removeChild(textarea);this.$toast.success(复制成功);console.log(复制成功[document.execCommand], text);},}
}
