and v-clipboard clipboard copy to clipboard

Because the project needs, the place pretty much used to copy, and some are pure html pages, some are vue project, this is to sum up in two ways

Use clipboard

You do not need to use frames

First to be introduced clipboard

1 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
2 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

　　Code section

 1 <body>
 2     <div>
 3         <span class="kf_num_title">客服微信号：</span>
 4         <input type="text" class="kf_num_tel" value="微信客服（12345678）" id="target1" readonly="" />
 5     </div>
 6     <button class="kf_num_btn" data-clipboard-action="copy" data-clipboard-target="#target1" id= "copy_btn1" > copy </ Button > 
. 7      < Script > 
. 8          // micro letter copy 
. 9          the let targetText1 = $ ( " # Target1 " ) .text ();    // acquiring content to be copied 
10          the let clipboard1 =  new new a Clipboard ( ' copy_btn1 # ' );    // new new copy button clicking on an object 
. 11          clipboard1.on ( ' success ' , function (E) {        // copy is successful 
12             e.clearSelection ();                 // clear the selected state of the selected text 
13 is              Alert ( ' successfully copied ' )
 14          });
 15      </ Script > 
16  </ body >

Using the v-clipboard

　　Use the Copy Project in effect vue

　　1, and installation references

1  @ 1. Install: 
2   NPM the install --save V- Clipboard
 . 3  // 2. incorporated in main.js 
. 4   Import from a Clipboard 'Clipboard-V'
 . 5   Vue.use (a Clipboard)

　　2, using

 1 <template>
 2   <div>
 4     <div>
 5       <div>链接：</div>
 6       <div class="short-link">{{regurl}}</div>
 7     </div>
 8     <div>
 9       <button v-clipboard:copy="regurl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</button>
10     </div>
11   </div>
12 </template>
13 <script>
14 
15 export default {
16   name: "Copy",  
17   data() {
18     return {
. 19        regurl: " https://www.cnblogs.com/sevenflower /"
 20 is      };
 21 is    },
 22 is    Methods: {
 23 is      oncopy () {
 24        Alert ( "copied successfully" );
 25      },
 26 is      the onError () {
 27        alert ( "copy failed" );
 28      }
 29    }
 30  };
 31 is </ Script>

and v-clipboard clipboard copy to clipboard

Guess you like