H5, vue dynamic copy text function, ClipboardJS

To be clear, vue is not vue clipboard

Because the vue clipboard has a flaw, it 复制动态数据时候will always get the last copied content due to asynchronous problems. As of 2 months ago, I have not seen any repairs. If there is a need for dynamic copying, please see here (vue)

H5 section

Clipboardjs used: http://www.clipboardjs.cn/

Let me talk about the general idea of ​​the plug-in
. 1. Bind an attribute to the copy button, and the value of the attribute points to the element
to be copied 2. The element to be copied is bound to val="xxxx"
3. js level instantiation And monitor the copy button, copy success/failure callback.

Then it’s very clear, the three roles

html层面
<p value=123456" id="content">随便写</p>

<button 
	class="copy"
    data-clipboard-target="#content"> 
    复制
</button>


js层面
// 复制
var clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e) {
    
    
    addClickButton();
    CM.message('复制成功！');
    e.clearSelection();
});
clipboard.on('error', function(e) {
    
    
   ...
});

Introduce

Can be installed through the npm tool

npm install clipboard --save
import clipboardJS form ’clipboard‘

This thing is very small and 3kB
can generally be placed in the directory and imported directly