移动端项目中有一个需求是要复制,但是只有这一个地方用,所以不想引插件,太占地方。所以找了一个方法。记录一下. 项目是基于vue搭建的。
<button @click="copyUrl">复制</button>
<input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value=""/>
<div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent" ></div>
copyUrl(){
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备
window.getSelection().removeAllRanges(); //这段代码必须放在前面否则无效
var Url2=document.getElementById("biaoios"); //要复制文字的节点
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(Url2);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');
// 移除选中的元素
window.getSelection().removeAllRanges();
this.$toast.show('复制成功');
// console.log("ios");
}else{
var Url2=document.getElementById("biao1");//要复制文字的节点
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
// console.log("an");
this.$toast.show('复制成功');
}
},