vueでclipboardを使用してシステムクリップボードをコピー

ダウンロード

npm install clipboard --save

オンデマンド導入
ほとんどのチュートリアルはappに直接あります.jsは導入され、vueにマウントされますが、この方法は推奨されません.レプリケーション機能は1ページしか使用されません.すべてのプラグインがvueにマウントされている場合、vueインスタンスは肥大化します.この機能が必要なファイルにclipboardを導入

import clipboard from "clipboard"

html要素にclassを付ける
例えば、私はコピーボタンを1つ持っています.では、このボタンにclassを追加します.または他の要素は可能ですが、classを追加します.ここでボタンをクリックすると、自動的にクリップボードに内容がコピーされます.down()メソッド処理イベント

<van-button class="copy"  @click="down">
	<i class="iconfont icon-download" />      
van-button>

クリップボードにコピーする方法
ダウンロード方法はmethodsに置けばいいです.注意完了または失敗した後に空にする前に作成したインスタンスをコピーしてください.そうでなければ、履歴オブジェクトが保持され、予想外の問題が発生します.

    /**   */
    down() {
      let copy = new clipboard('.copy',{
        text(){
          return 'test' //                    
        }
      })
      //    
      copy.on('success',res=>{
        copy.destroy();//           ！！！     ，          ，F12 console
        console.log('success')
      })
      //    ，   
      copy.on('error',err=>{
        copy.destroy();
        console.log('error')
      })
    }