【JS】原生js实现复制功能

主要原理：
1.设定选中内容，
2.调用document.execCommand(“Copy”);

细节：
1.复制input内容
input的dom对象调用select()方法

// 以下为vue代码

<text-input ref="url" type="text" name='url'</text-input>
<b-button @click="copyBtnClickEvent">lalalala</b-button>

copyUrlBtnClickEvent: function() {
    this.$refs.url.$refs.exinput.children[0].select();
    document.execCommand("Copy");
}

2.复制div内容
使用Range对象

// 以下为vue代码

<div @click="copyBtnClickEvent($event, val)" text="ID:APTX-4869"></div>
        
copyBtnClickEvent(e, val) {
    var range = document.createRange();
    range.selectNodeContents(e.target);//设定要选中的节点，此时选中范围为“ID:APTX-4869”
    range.setStart(e.target.firstChild, 3);//设定选中范围为“APTX-4869”

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");//此时剪贴板中的内容为“APTX-4869”
}

3.复制非dom元素内的字符串
创建一个隐藏的input节点，然后使用1中的方法
或创建一个隐藏的div节点，然后使用2中的方法