h5在手机端实现简单复制

<a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载clipborrdjs</a>　

下载地址：https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js

html中：

<div id="app">

　　<a href="javascript:;" @click="copyClick" class="copy" data-clipboard-text="要让复制的内容" data-clipboard-action="copy" >点击复制ID</a>

</div>

 

在js中:

new Vue({
　　el: '#app',
　　data: function () {
　　　　return {
　　　　}
　　},
　　methods: {
　　　　copyClick: function(){
　　　　　　var clipboard = new Clipboard("#copyBtn");
　　　　　　clipboard.on('success', function(e) {
　　　　　　　　MINT.Toast("复制成功:"+e.text);
　　　　　　});
　　　　　　clipboard.on('error', function(e) {
　　　　　　　　MINT.Toast("请重试");
　　　　　　});
　　　　}
　　},
　　created: function(){
　　　　var that = this;
　　})

如此简单的就实现复制了

 

 

在vue中使用 

1. 引入clipboard.js

　　npm install clipboard --save  

2. 在需要使用的组件中import

　　import Clipboard from 'clipboard';  

3. 添加需要复制的内容　　

　　<li class="warp-li copy" id="copyBtn" data-clipboard-text="shou-a666" @click="copy">
　　　　<img src="../assets/img/icom_weixin@2x.png" alt="">
　　　　<p>shou-a666</p>
　　</li>

4. methods中写入copy方法

　　copy() { 　　 

　　　　let that = this;
　　　　let clipboard = new Clipboard('#copyBtn')
　　　　clipboard.on('success', e => {
　　　　　　that.$toast("复制成功:"+e.text)
　　　　　　clipboard.destroy()
　　　　})
　　　　clipboard.on('error', e => {
　　　　　　console.log('该浏览器不支持自动复制')
　　　　　　clipboard.destroy()
　　　　})

      }