1.话不多说先来个小漩涡
2.微信ios 火狐不兼容document.execCommand(“copy”); // 执行浏览器复制命令
3.解决方案
<div id="twoLivecode" v-if="copyBox">
<p id="text"> {{twoLivecode}}</p>
<textarea id="input">这是幕后黑手</textarea>
<van-button style="width: 20%;margin: 0 auto" type="primary" size="small" @click="copy">复制</van-button>
</div>
<style>
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
//函数方法调用
copy(){
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
// input.value = text; // 修改文本框的内容
// input.select(); // 选中文本
// document.execCommand("copy"); // 执行浏览器复制命令
// alert("复制成功");
this.copyText(text)
},
copyText(text) {
//console.log(text)
// 数字没有 .length 不能执行selectText 需要转化成字符串
const textString = text.toString();
let input = document.querySelector('#input');
input.value = textString;
// ios必须先选中文字且不支持 input.select();
selectText(input, 0, textString.length);
//console.log(document.execCommand('copy'), 'execCommand');
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('已复制到粘贴板');
}
input.blur();
// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
if (textbox.createTextRange) {//ie
const range = textbox.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex);//起始光标
range.moveEnd('character', stopIndex - startIndex);//结束光标
range.select();//不兼容苹果
} else {//firefox/chrome
textbox.setSelectionRange(startIndex, stopIndex);
textbox.focus();
}
}
}