H5、vue動的コピーテキスト機能、ClipboardJS

明確にするために、vueはvueクリップボードではありません

vueクリップボードに欠陥がある复制动态数据时候ため、非同期の問題により常に最後にコピーされたコンテンツが取得されます。2か月前の時点で、修復は見られません。動的コピーが必要な場合は、こちら（vue）を参照してください。

H5セクション

使用されるClipboardjs：http：//www.clipboardjs.cn/

プラグインの一般的な考え方について説明し
ます。1。属性をコピーボタンにバインドすると、属性の値
がコピーされる要素を指します。2。コピーされる要素がval =にバインドされます。 "xxxx"
3. jsレベルのインスタンス化コピーボタンを監視し、成功/失敗のコールバックをコピーします。

次に、3つの役割が非常に明確です

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) {
    
    
   ...
});

導入する

npmツールを介してインストールできます

npm install clipboard --save
import clipboardJS form'clipboard '

これは非常に小さく、3kBで、
通常はカタログに直接配置できます。