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中使用
npm install clipboard --save
2. 在需要使用的组件中import
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在手机端实现简单复制的更多相关文章
- 论如何在手机端web前端实现自定义原生控件的样式
手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式.首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样: android: ios ...
- 基于 TensorFlow 在手机端实现文档检测
作者:冯牮 前言 本文不是神经网络或机器学习的入门教学,而是通过一个真实的产品案例,展示了在手机客户端上运行一个神经网络的关键技术点 在卷积神经网络适用的领域里,已经出现了一些很经典的图像分类网络,比 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- KindEditor解决上传视频不能在手机端显示的问题
KindEditor自带的上传视频生成的HTML代码为<embed>,在手机端并不支持.于是可以自己在控件里增加生成video标签相关代码. 参考https://www.jianshu.c ...
- mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- 手机端rem简单配置相关
手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...
- wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放
如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...
- 让PC端页面在手机端显示缩小版的解决方法
做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta <meta name= ...
- 首页背景图片在PC端有显示,在手机端不显示的解决方法
今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...
随机推荐
- Spring Bean自动检测
1-自动检测bean 需要用到<context:component-scan> 注意:a) 需要include进来xmlns:context命名空间:base-package指的是我们要扫 ...
- Keepalived详解(一):Keepalived介绍【转】
一.Keepalived介绍: Keepalived是Linux下一个轻量级的高可用解决方案,它与HeartBeat.RoseHA实现的功能类似,都可以实现服务或者网络的高可用,但是又 ...
- java官网真不错
要用到一个软件,打开时说没找到javaw,然后大家说这是因为没安装java,就按着链接去了java官网 https://www.java.com/zh_CN/download/faq/remove_o ...
- python用类装饰函数的一个有趣实现
class RunningLog: def __init__(self,func): self._func=func self._func_name = func.__name__ def __cal ...
- 题解-bzoj2554 Color
Problem Please contact lydsy2012@163.com! 题意概要:有 \(n\) 个球排成一列,每个球都有一个颜色,每次随机选出两个球,使得后者染上前者的颜色,求期望操作多 ...
- ACM Computer Factory POJ - 3436 网络流拆点+路径还原
http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...
- java interview
gitbook address https://dongchuan.gitbooks.io/java-interview-question/content/java/==_equal.html
- 基于OpenSSL自建CA和颁发SSL证书
关于SSL/TLS介绍见文章 SSL/TLS原理详解.关于证书授权中心CA以及数字证书等概念,请移步 OpenSSL 与 SSL 数字证书概念贴 . openssl是一个开源程序的套件.这个套件有三个 ...
- Zeppelin0.7.2结合hive解释器进行报表展示
前提:服务器已经安装好了hadoop_client端即hadoop的环境hbase,hive等相关组件 1.环境和变量配置①拷贝hive的配置文件hive-site.xml到zeppelin-0.7. ...
- MySQL的information_schema
在一次清空一张比较大的表时(在清空前占用400多兆),发现该表中记录为0条但是空间并没有被释放,采用下面方式可查看占用情况 -- 查询各个数据库占用磁盘的情况 ,),' MB') as data_si ...