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 ...
随机推荐
- Markdown超链接及脚注
Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...
- CF1100D Dasha and Chess
题目地址:CF1100D Dasha and Chess 这是我的第一道交互题 思路不难,主要讲讲这条语句: fflush(stdout); stdout是标准输出的意思.因为有时候,我们输出到std ...
- pt-table-checksum 使用方法【转】
27. pt-table-checksum27.1 pt-table-checksum 作用 主要用来检查主从数据是否一致,原理即在主库执行把表每行的列通过concat函数进行拼接,然后对拼接的值进行 ...
- 解决win10中chm内容显示为空白的问题
在win10中打开chm文件,一般会是这个效果,内容显示为空白: 解决这个问题的方法是,在打开chm文件时,会有个安全警告的询问对话框,如下: 将[打开此文件前总是询问(W)]复选框的勾去掉,就OK了 ...
- git与eclipse集成之更新特性分支代码到个人特性分支
1.1. 更新特性分支代码到个人特性分支 在基于特性分支开发的过程中,存在多人向特性分支提交代码的情况,开发者需要关注特性分支代码与个人分支代码保持同步,否则可能导致提交代码冲突. 具体代码同步步骤: ...
- mysqlfrm初步使用
这个工具也就是读取frm文件生成建表语句默认的模式是再生个实例,使用--basedir选项或指定--server选项来连接到已经安装的实例.这种过程不会改变原始的.frm文件.该模式也需要指定--po ...
- Ex 7_21 在一个流网络中,一条边被称为是临界的...第十三次作业
如果原图中的一条边e(u,v)是临界边,则在求解最大流的过程中这条边的流量将会被占满,即在残量图中只存在反向边e(v,u),不存在正向边e(u,v).但是残量图中并不是所有的只存在反向边的顶点对之间的 ...
- 利用zxing生成二维码
使用zxing类库可以很容易生成二维码QRCode,主要代码如下: private Bitmap createQRCode(String str,int width,int height) { Bit ...
- tomcat占用cpu比较多
在Linux中当Tomcat启动后,我们只是去查看应用是否能够正常访问来判断Tomcat启动是否正常.一般情况下这样看是没有问题的,但是有时候我们会发现当Tomcat使用了一段时间后,开始出现CPU或 ...
- 牛客网 python 求解立方根
•计算一个数字的立方根,不使用库函数 详细描述: •接口说明 原型: public static double getCubeRoot(double input) 输入:double 待求解参数 返回 ...