layui实现二维码弹窗、并下载到本地的方法


Posted in Javascript onSeptember 25, 2019

在服务器端写好生成二维码的方法,在下面调用

具体实现方法如下,为了方便理解,直接附上源码,加上注释会更加容易理解吧

function share(vote_id){
 		//二维码生成链接
  var url = "{:U('Admin/Vote/logo')}?vote_id="+vote_id;
  //弹窗
  var index = layer.open({
  		//type:1 表示页面层
   type: 1,
   title: '分享二维码',
   //是否点击遮罩关闭
   shadeClose: true,
   //样式类名,可以自定义弹窗样式
   skin:'demo_share',
   //弹层外区域
   shade: 0.3,
   maxmin: false, //开启最大化最小化按钮
   //宽高
   area: ['480px','320px'],
   //内容
   content: "<img src='"+url+"' alt=''>",
   //弹窗下方的按钮
   btn:['<i class="layui-icon" style="margin-right: 10px;"></i>下载图片','取消','确定'],
   //绑定第一个按钮的点击事件
   btn1: function(index) {
				//下载图片到本地
    var a = document.createElement('a');
    var event = new MouseEvent('click');
    a.download = "分享投票二维码";
    a.href = url;
    a.dispatchEvent(event);
   }
  });

 }

若有问题或错误,请小伙伴们在下方留言评论

以上这篇layui实现二维码弹窗、并下载到本地的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
JavaScript实现简单的计算器
Jan 16 Javascript
使用localStorage替代cookie做本地存储
Sep 25 #Javascript
JavaScript使用localStorage存储数据
Sep 25 #Javascript
Vue路由守卫之路由独享守卫
Sep 25 #Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
You might like
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python实现定时播放mp3
2015/03/29 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
财务会计应届生求职信
2013/11/24 职场文书
党员批评与自我批评
2014/02/12 职场文书
Python基础之Socket通信原理
2021/04/22 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL