jsクリックしてコピーして、3種類の方案の記録

vue     。

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: {}
};

    jq  ，          ，   var Url2=this.$refs.biao1; //vue         

     js         var Url2=document.getElementById("biao1");//        

参照先:https://clipboardjs.com/