Article From:https://www.cnblogs.com/12baby/p/9564742.html
html:
<ul class="code_ul">
                
</ul>

 

 
 
css:
.code_ul>li{
color: #00a28c6c;
display: -webkit-flex;
height: .4rem;
line-height: .4rem;
font-weight: 600;
font-size: .14rem;
align-items: center;
}
.code_ul>li .button{
flex: 1;
width: .6rem;
color: #fff;
background: #ff6c72;
border:none;
border-radius: 20px;
text-align: center;
margin-left:.3rem;
}

  

 
 
 
js:
Here is the addition of dynamic data.
 1                     if (res.code == 1) {
 2                         res.data.forEach(function (element, ind) {
 3                             if (/(iPhone|iOS)/i.test(navigator.userAgent)) {
 4                                 $('.code_ul').empty();
 5                                 lis += '<li>Exchange code'+ ind + 1 +': & lt; P class ='contents'and'+ element + LT'& lt; / P & gt; & lt; button data - clipboard - tExt= "+ + element +" class= "button copy'+ (ind + 1) +" > replication < /button> < /li> ";
 6                                 $('.code_ul').html(lis);
 7                                 var btns = document.querySelectorAll('.button');
 8                                 var clipboard = new ClipboardJS(btns);
 9                                 clipboard.on('success', function (e) {
10                                     easter_egg.popTips('Replication success);
11                                 });
12 
13                                 clipboard.on('error', function (e) {
14                                     console.log(e);
15                                 });
16                             } else if (/(Android)/i.test(navigator.userAgent)) {   //Judge Android
17                                 var userAgent = navigator.userAgent;
18                                 var index = userAgent.indexOf("Android")
19                                 if (index >= 0) {
20                                     var androidVersion = parseFloat(userAgent.slice(index + 8));
21                                     if (androidVersion < 6) {
22                                         $('.code_ul').empty();
23                                         lis += '<li>Exchange code'ind + 1 + lt: & lt; textarea class ='text'gt;'element + lt' & lt; / textarea & gt; & lt; / Li & gt; ';
24                                         $('.code_ul').html(lis);
25                                     } else {
26                                         $('.code_ul').empty();
27                                         lis += '<li>Exchange code'+ ind + 1 +': & lt; P class ='contents'and'+ element + LT'& lt; / P & gt; & lt; button data - clipboard - tExt= "+ + element +" class= "button copy'+ (ind + 1) +" > replication < /button> < /li> ";
28                                         $('.code_ul').html(lis);
29                                         var btns = document.querySelectorAll('.button');
30                                         var clipboard = new ClipboardJS(btns);
31                                         clipboard.on('success', function (e) {
32                                             easter_egg.popTips('Replication success);
33                                         });
34 
35                                         clipboard.on('error', function (e) {
36                                             console.log(e);
37                                         });
38 
39                                     }
40                                 }
41                             }
42 
43 
44                         });
45                     } else {
46                         easter_egg.popTips(res.message);
47                         return;
48                     }

 

 

 

 
The clipboard.min.js plug-in is used. Android below 5 does not support, so it has not been solved.

Leave a Reply

Your email address will not be published. Required fields are marked *