vue实现复制功能时多次点击在IOS下出现闪屏
做项目时发现自定义的复制按钮,对应的方法如下
<div class="clone" @click="cloneId(myUserInfo.userId)"></div>
cloneId(value) {
var aux = document.createElement("input");
aux.setAttribute("value", value);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
在ios下(安卓正常)多次点击时会出现闪频的现象,发现是构建虚拟DOM时没有将其隐藏,造成出现一瞬间的闪屏,于是将方法改为下列方法,将构建的虚拟DOM通过设置其css方式隐藏起来
const textarea = document.createElement('textarea');
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.top = '0px';
textarea.style.left = '-9999px';
textarea.style.zIndex = '-9999';
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = value
// 将 textarea 插入到 el 中
document.body.appendChild(textarea);
textarea.select(); // 选中值并复制
const result = document.execCommand('Copy');
this.$toast('复制成功')
document.body.removeChild(textarea);