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 ...
随机推荐
- git 上传代码
1.注册GitHub账号 2.在GitHub上建立github仓库 3.下载git 4.配置git 5.生成SSH密钥,并把密钥添加SSH密钥到GitHub上 6.创建本地仓库并上传代码到github ...
- 管理并行SQL执行的进程
本节介绍的并行执行功能可用于Oracle数据库企业版 本节介绍如何管理SQL语句的并行处理.在此配置中,Oracle数据库可以将处理SQL语句的工作分为多个并行进程. 许多SQL语句的执行可以并行化. ...
- 使用git和github管理自己的项目---基础操作学习[转]
原文: https://segmentfault.com/a/1190000003728094 我是通过看廖雪峰的git教程学习的,真的是极好的,以下是我学习过程中的总结,记录下来,方便自己参考以熟悉 ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
- jquery获取浏览器URL参数
getRequestParams:function(param){ var reg = new RegExp("(^|&)" + param + "=([^&am ...
- jQuery.extend()参数
非原创,转载仅供学习 在处理插件参数的接收上,通常使用jQuery的extend方法.extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,而当用extend方法传递一个以上的参数时 ...
- 压缩JS的eclipse插件
主页:http://jscompressor.oncereply.me/ Update site: http://jscompressor.oncereply.me/update/
- ASP.NET MVC5入门2之Ajax实现数据查询
开发环境:VS2013 数据库:SQL Server2008R2 架构:ASP.NET MVC5 开发语言:C# 代码下载链接:http://download.csdn.net/detail/u010 ...
- Caffeine缓存
在本文中,我们来看看 Caffeine — 一个高性能的 Java 缓存库. 缓存和 Map 之间的一个根本区别在于缓存可以回收存储的 item. 回收策略为在指定时间删除哪些对象.此策略直接影响缓存 ...
- python之__call__()
__call__ 在Python中,函数其实是一个对象: >>> f = abs >>> f.__name__ 'abs' >>> f(-123) ...