プロジェクトのニーズ、ほとんどコピーするために使用場所、およびいくつかは、純粋なHTMLページであるが、いくつかは、VUEのプロジェクトなので、この2つの方法でまとめることです
使用クリップボード
あなたは、フレームを使用する必要はありません
クリップボードを導入する最初の
1 <スクリプトSRC = "https://code.jquery.com/jquery-2.2.4.min.js"> </ SCRIPT> 2 <スクリプトSRC = "https://cdn.jsdelivr.net/clipboard.js /1.5.12/clipboard.min.js "> </ SCRIPT>
コードセクション
1 < 本体> 2 < DIV > 3 < スパンクラス= "kf_num_title" >客服微信号：</ スパン> 4 < 入力タイプ= "テキスト" クラス= "kf_num_tel" 値= "微信客服（12345678）" ID =」ターゲット1" 読み取り専用= "" /> 5 </ divの> 6 < ボタンクラス= "kf_num_btn" データ・クリップボード・アクション= "コピー"データ・クリップボード・ターゲット=「＃ターゲット1」のid= "copy_btn1" >コピー</ ボタンを> 7。 < スクリプト> 8。 // マイクロ文字のコピー 9。 LET targetText1 = $（" ＃ターゲット2 " ）は.text（）; // コピーするコンテンツを取得する 10 のlet clipboard1 = 新しい新しいクリップボードを（" copy_btn1の＃' ）; // オブジェクトに新しい新しいコピー]ボタンをクリックする 。11 clipboard1.on（' 成功" 、機能（E）{ // コピーが成功した 12 e.clearSelectionは（）; // 選択されたテキストの選択状態をクリアし 13である （警告' 正常にコピー' ） 14 }）; 15 </ スクリプト> 16 </ ボディ>
V-クリップボードを使用して
効果VUEでプロジェクトのコピーを使用します
1、およびインストールの参照
1 @ 1インストール： 2 NPMをV- --saveインストールクリップボード 。3 // main.jsに組み込まれた2 4。 クリップボード'クリップボード-V'からインポート 5。 Vue.use（クリップボード）
使用して2、
1 <テンプレート> 2 の<div> 4 <DIV> 5 <DIV>链接</ div> 6 <DIV CLASS = "短リンク"> {{regurl}} </ div> 7 </ div> 8 <DIV > 9 <ボタンV-クリップボード：コピー= "regurl" V-クリップボード：成功= "onCopy" V-クリップボード：エラー= "のonError">复制</ボタン> 10 </ divの> 11 </ divの> 12 </テンプレート> 13 <スクリプト> 14 15の輸出デフォルト{ 16 名前： "コピー" 、 17個の データ（）{ 18 リターン{ 19 regurl： " https://www.cnblogs.com/sevenflower /" 20である }; 21である }、 22である 方法：{ 23である （）{oncopy 24 アラート（ "正常にコピーされ" ）; 25 } 26である のonError（）{ 27 アラート（ "コピーが失敗しました" ）; 28 } 29 } 30 }; 31である </ SCRIPT>