在vue中引入layer弹框的简易方法
npm i --save layui-layer
2、在main.js中引入
import layer from "layui-layer";
3、然后就可以在各个组件中使用layer了
实例:
layer.confirm('您是如何看待前端开发?', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
4、在项目中使用loading页
var loading= layer.load(3, {//请求未成功时出现loading页 ,3代表一中效果
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
layer.close(loading); //停止loading效果
var confirm=layer.confirm('删除后,作者所选择【单位序号】数据将被清空,需要重新选择,是否确定?', {
btn: ['确定','取消'] //按钮
}, function(){
self.companyInfoArr.splice(index,1);
layer.close(confirm);
},function(){
});
5,1.5s后消失的提示框
layer.msg("操作成功!",{icon:,time:});//提示框
6,询问框
layer.confirm('是否已完成支付?', {//layer弹窗插件
title:"信息",
closeBtn: ,
btn: ['付款成功','付款失败'] //按钮
}, function(){
self.completePay(id);//查询是否支付
layer.closeAll();
},function(){
//...
});
上面有各种弹窗的使用示例
在vue中引入layer弹框的简易方法的更多相关文章
- vue 中使用 Toast弹框
import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(ToastPlugin) Vue.use(ConfirmPlugi ...
- 关于刷新同级layer弹框的解决方法
在项目中遇到这种情况: 父页面点击详情,layer.open一个子页面A,子页面里面又存在操作按钮,点击使用parent.layer.open在打开一个子页面B,子页面B点击提交操作成功要刷新子页面A ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- layer弹框在实际项目中的一些应用
官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...
- vue编辑、新增弹框(引用外部页面)
vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- layer弹框层学习笔记
这里对layer的笔记只是大概记录一下其使用过程,以便后续使用时快速回顾,更详细使用及介绍参考官网实例.链接在本文末 一 .初步了解layer-弹层之美 layer是一款近年来备受青睐的web弹层组件 ...
- 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
随机推荐
- 嵌入式Linux的计划任务,发送请求记录
- Neo4j Cypher语法(二)
目录 4 子句 4.1 CREATE 4.2 MATCH 4.3 Match 4.4 Create match return连用来返回一个关系基础 4.5 Optional_match 4.6 Wit ...
- 怎样使用 v-on 指令?
1. Vue 中的 v-on 指令用于绑定 dom 事件 的监听函数. 下面代码实现的是 点击更改文字颜色 的功能. <!DOCTYPE html> <html lang=" ...
- 实现a标签按钮完全禁用
前言 最近在开发时遇见一个问题 我们知道a标签的disabled属性部分浏览器支持,但是尽管设置了disabled属性也无法阻挡任何鼠标经过或是点击事件的,那么如何实现a标签按钮的禁用呢? 转换一下思 ...
- Python学习笔记:利用爬虫自动保存图片
兴趣才是第一生产驱动力. Part 1 起先,源于对某些网站图片浏览只能一张一张的翻页,心生不满.某夜,冒出一个想法,为什么我不能利用爬虫技术把想看的图片给爬下来,然后在本地看个够. 由此经过一番初尝 ...
- 修改this的指向
call var a={ name:'xuux', fn:function(a,b){ console.log(a+b); console.log(this);//{name: "xuux& ...
- count(*),count(1),count(字段)
如果null参与聚集运算,则除count(*)之外其它聚集函数都忽略null. 如: ID DD 1 e 2 null select count( ...
- Tomcat项目自动部署脚本
一般情况下使用的Linux环境都是加固的,root路径只有超级管理员权限才能进入.我们新建一个自己的用户,在/home下会有一个用户目录,传输war包都放在这个目录下,此时不动webapps文件下的内 ...
- 2.Java NIO 简介
概述 Java NIO 是 JDK 1.4 发布的一套全新的IO API(New IO 简称 NIO),由于 JDK 1.7 对 NIO 的更新,目前 NIO 被广泛应用,以至于 将 JDK 1.7 ...
- angular流程引擎集成
工作流在oa和erp中十分常见,现有成熟的工作流通常是在客户端实现的,web实现工作流的案例十分稀少.要实现web工作流必须要有强大的流程设计器,这里为大家介绍一款基于angular的流程控件,其功能 ...