フロントの内容をコピーするボタンをクリックしてください

A、VUE

効果：

コード：

1  < テンプレート> 
2      < DIV > 
3          < EL-行スタイル= "高さ：40ピクセル" タイプ= "フレックス" > 
4              < EL-COL ：スパン= "6" > 
5                  < P > {{RES}} </ P > </ EL-COL > 
6              < EL-COL ：スパン= "2" > 
7                  < EL-ボタンタイプ= "ボタン" @click = "コピー（）" >复制</ EL-ボタン> 
8             </ EL-COL > 
9  
10          </ EL-行> 
11      </ DIV > 
12  </ テンプレート> 
13  < スクリプト> 
14      エクスポートデフォルト{
 15個の         データ（）{
 16              リターン{
 17の                 RES：' 要复制的内容' 、
 18              }
 19          }
 20の 
21          の方法：{
 22              コピー（）{
 23                  本$ copyText（。この.RES）.then（関数（E）{
 24                      アラート（' コピー' ）
 25  
26である                 }、関数（E）{
 27                      アラート（' コピー失敗' ）
 28                  }）
 29              }
 30  
31である 
32          }
 33      }
 34  < / スクリプト>

 

 

二、html

効果：

 

コード：

1  <！DOCTYPE HTML > 
2  < HTML のlang = "ZH" > 
3  < ヘッド> 
4  </ ヘッド> 
5  < ボディ> 
6  < DIV > 
7      < スパンID = "コピー" >复制的内容</ スパン> 
8      < ボタンタイプ= "ボタン" のonclick = "コピー（）" >复制</ ボタン> 
9  
10  <
11  </ ボディ> 
12  < スクリプトタイプ= "テキスト/ javascriptの" SRC = "静的/ JS / jquery.min.js" > </ スクリプト> 
13  < スクリプトタイプ= "テキスト/ javascriptの" SRC = "静的/ JS / main.min.js」> </ スクリプト> 
14  < スクリプトタイプ= "テキスト/ javascriptの" > 
15      関数コピー（）{
 16      VAR copyTest = のdocument.getElementById（" コピー" ）.innerText。
17      花嫁介添人inputTest = のdocument.createElement（' 入力' ）。
18      inputTest.value = copyTest。
19      document.body.appendChild（inputTest）。
20      inputTest.select（）。
21      document.execCommand（" コピー" ）;
22      inputTest.className =  ' oInput ' 。
23      inputTest.style.display =  ' なし' ;
24      警告（' 复制成功' ）;
25  }
26  </ スクリプト> 
27  
28  </ HTML >