<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. 添加需要复制的内容  

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()
    })

}

 

h5在手机端实现简单复制的更多相关文章

  1. 论如何在手机端web前端实现自定义原生控件的样式

    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式.首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样: android: ios ...

  2. 基于 TensorFlow 在手机端实现文档检测

    作者:冯牮 前言 本文不是神经网络或机器学习的入门教学,而是通过一个真实的产品案例,展示了在手机客户端上运行一个神经网络的关键技术点 在卷积神经网络适用的领域里,已经出现了一些很经典的图像分类网络,比 ...

  3. HTML5中的audio在手机端和 微信端的自动播放

    再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...

  4. KindEditor解决上传视频不能在手机端显示的问题

    KindEditor自带的上传视频生成的HTML代码为<embed>,在手机端并不支持.于是可以自己在控件里增加生成video标签相关代码. 参考https://www.jianshu.c ...

  5. mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  6. 手机端rem简单配置相关

    手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...

  7. wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放

    如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...

  8. 让PC端页面在手机端显示缩小版的解决方法

    做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta  <meta name= ...

  9. 首页背景图片在PC端有显示,在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

随机推荐

  1. Spring Bean自动检测

    1-自动检测bean 需要用到<context:component-scan> 注意:a) 需要include进来xmlns:context命名空间:base-package指的是我们要扫 ...

  2. Keepalived详解(一):Keepalived介绍【转】

    一.Keepalived介绍:         Keepalived是Linux下一个轻量级的高可用解决方案,它与HeartBeat.RoseHA实现的功能类似,都可以实现服务或者网络的高可用,但是又 ...

  3. java官网真不错

    要用到一个软件,打开时说没找到javaw,然后大家说这是因为没安装java,就按着链接去了java官网 https://www.java.com/zh_CN/download/faq/remove_o ...

  4. python用类装饰函数的一个有趣实现

    class RunningLog: def __init__(self,func): self._func=func self._func_name = func.__name__ def __cal ...

  5. 题解-bzoj2554 Color

    Problem Please contact lydsy2012@163.com! 题意概要:有 \(n\) 个球排成一列,每个球都有一个颜色,每次随机选出两个球,使得后者染上前者的颜色,求期望操作多 ...

  6. ACM Computer Factory POJ - 3436 网络流拆点+路径还原

    http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...

  7. java interview

    gitbook address https://dongchuan.gitbooks.io/java-interview-question/content/java/==_equal.html

  8. 基于OpenSSL自建CA和颁发SSL证书

    关于SSL/TLS介绍见文章 SSL/TLS原理详解.关于证书授权中心CA以及数字证书等概念,请移步 OpenSSL 与 SSL 数字证书概念贴 . openssl是一个开源程序的套件.这个套件有三个 ...

  9. Zeppelin0.7.2结合hive解释器进行报表展示

    前提:服务器已经安装好了hadoop_client端即hadoop的环境hbase,hive等相关组件 1.环境和变量配置①拷贝hive的配置文件hive-site.xml到zeppelin-0.7. ...

  10. MySQL的information_schema

    在一次清空一张比较大的表时(在清空前占用400多兆),发现该表中记录为0条但是空间并没有被释放,采用下面方式可查看占用情况 -- 查询各个数据库占用磁盘的情况 ,),' MB') as data_si ...