JavaScript クリップボードの使用法の詳細な説明

   <button class="btn">Copy_target</button>
   <div>こんにちは</div>

   <スクリプト>
   var クリップボード = 新しいクリップボード('.btn', {
   // ターゲットを通じてコピーするノードを指定する target: function() {
                  document.querySelector('div') を返します。
             }
   });

   clipboard.on('成功', 関数(e) {
       コンソールログ(e);
   });

   clipboard.on('エラー', 関数(e) {
       コンソールログ(e);
   });
   </スクリプト>

<button class="btn">コピー</button>
<スクリプト>
   var クリップボード = 新しいクリップボード('.btn', {
   // コピーボタンをクリックし、コピーした内容をテキストで直接返します text: function() {
           「存在するか、存在しないか」を返します。
       }
   });

   clipboard.on('成功', 関数(e) {
       コンソールログ(e);
   });

   clipboard.on('エラー', 関数(e) {
       コンソールログ(e);
});

// ID で data-clipboard-text の内容を取得します <div id="btn" data-clipboard-text="1">
        <span>コピー</span>
</div>
 
<スクリプト>
    var btn = document.getElementById('btn');
    var クリップボード = 新しいクリップボード(btn);
 
    clipboard.on('成功', 関数(e) {
        コンソールログ(e);
    });
 
    clipboard.on('エラー', 関数(e) {
        コンソールログ(e);
    });
</スクリプト>

// クラスを通じて複数のボタンを登録し、data-clipboard-text の値を取得します <button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">コピー</button>
    <button class="btn" data-clipboard-text="3">コピー</button>
 <スクリプト>
    var クリップボード = 新しいクリップボード('.btn');
 
    clipboard.on('成功', 関数(e) {
        コンソールログ(e);
    });
 
    clipboard.on('エラー', 関数(e) {
        コンソールログ(e);
    });
    </スクリプト>

//ClipboardJS.isSupported() //--------この文は: 互換性がありますか? var clipboard = new Clipboard('.btn');
// 正常なダウングレード: Safari のバージョン番号が 10 以上の場合、コピーが成功したことを示すプロンプトが表示されます。それ以外の場合は、テキストを選択した後、手動で「コピー」を選択してコピーする必要があることを示すプロンプトが表示されます。clipboard.on('success', function(e) {
    alert('コピー成功!')
    e.clearSelection();
});
clipboard.on('エラー', 関数(e) {
    alert('コピーするには「コピー」を選択してください!')
// 警告を削除しようとすると、システムの「コピー」ツールがポップアップすることがありますが、ポップアップするにはボタンを 2 回クリックする必要があります。具体的な理由は不明です。上の画像を参照してください。 iOS は単純に on イベントをサポートしていないため、トリガーの場所に空のクリック イベント ( οnclick="" ) を書き込んでみることができると言う人もいます}); 

<画像
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="コピー"
      データクリップボードアクション="コピー"
      クラス="メール"
      :data-clipboard-text="'mayouchen@csdn.com'"
    /> 

-------------------
  コピー（） {
     var クリップボード = 新しいクリップボード(".email")
     // console.log(クリップボード);
     clipboard.on("成功", e => {
       // console.log("コピー成功", e);
       トースト（{
         メッセージ: 「コピー成功」
       })
       // メモリを解放する clipboard.destroy()
     })
     clipboard.on("エラー", e => {
       // Toast({のコピーはサポートされていません
         メッセージ: 「携帯電話の権限ではコピー機能はサポートされていません」
       })
       console.log("このブラウザは自動コピーをサポートしていません")
       // メモリを解放する clipboard.destroy()
     })
   }