vue框架的写法。
<template>
<div id="app" style="padding-bottom:100px;">
<p style="margin-bottom:3rem;">点击复制到剪切板,方案1</p>
<button class="btn" data-clipboard-text="此处为复制的文字" @click="copyFun">
Copy to clipboard
</button>
<p>---------------------</p>
<p style="margin-bottom:3rem;">点击复制到剪切板,方案2</p>
<textarea id="contents" cols="40" rows="5" ref="cpy">此为方案2复制的内容,啦啦啦</textarea>
<input type="button" @click="copyLink($event)" value="复制" />
<p>---------------------</p>
<p style="margin-bottom:3rem;">点击复制到剪切板,方案3</p>
<input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" ref="biao1" value="这是方案3复制的文字-input" />
<p @click="copy3($event)">复制3</p>
<div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent" ref="cpy3">这是方案3复制的文字</div>
<p>---------------------</p>
测试页面demo momomomoom
</div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
name: 'app',
data() {
return {
};
},
methods: {
copyFun(){
//方案1:点击复制手机号,手机(安卓)微信和QQ可以,浏览器UC和自带浏览器不行. ios的微信,浏览器可以;pc的chrome可以
var clipboard = new Clipboard('.btn');
console.log("点击");
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert('微信号已复制,请打开微信,点击右上角+号,选择添加朋友,粘贴搜索')
// 释放内存
clipboard.destroy()
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
// 不支持复制
alert('浏览器不支持自动复制,请手动复制微信号')
// 释放内存
clipboard.destroy()
});
},
//方案2
copyLink(e){
//方案2,ios微信环境下不行,浏览器也不行。安卓下,微信可以,浏览器不行
var e=this.$refs.cpy;//对象是contents
console.log(this.$refs.cpy);
e.select(); //选择对象 (全选)
document.execCommand("Copy"); //执行浏览器复制命令
},
//方案3,ios微信,浏览器均可 安卓,微信可以,浏览器不行。 额外要做的是,要设两个不可见的存值处,cpy3与biao1 。结果同方案1,但比方案1麻烦
copy3(e){
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
//var Url2=document.getElementById("biaoios");//要复制文字的节点
var Url2=this.$refs.cpy3; //vue中拿到文字节点
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(Url2);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');
// 移除选中的元素
window.getSelection().removeAllRanges();
alert("复制3-1");
}else{
// var Url2=document.getElementById("biao1");//要复制文字的节点
var Url2=this.$refs.biao1; //vue中拿到文字节点
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制3-2");
}
}
},
mounted() {},
components: {}
};
</script>
<style lang="scss">
</style>
若想改为jq写法,改一下获取元素的方式,比如 var Url2=this.$refs.biao1; //vue中拿到文字节点
改为 原生js 获取节点的方式 var Url2=document.getElementById("biao1");//要复制文字的节点
参考地址:https://clipboardjs.com/