js点击复制，3种方案记录

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/