在vue中引入layer弹框的简易方法
2024-08-29 19:15:58
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(){
//...
});
上面有各种弹窗的使用示例
最新文章
- MD5工具类
- vue生命周期
- 07_旅行商问题(TSP问题,货郎担问题,经典NPC难题)
- infragistcs 又
- iOS - OC NSRange 范围
- 服务器设置Apache对htaccess支持
- Linux中的syslog 入门学习教程
- .Net Remoting浅释
- iphone开发 IOS 组织架构图
- Deep Learning for Natural Language Processing1
- STM32/GD32芯片信息(转)
- lbp特征提取(等价模式)
- ThinkPhp5.0_文件上传
- RHEL6非交互式工具sshpass和expect安装
- vue-axios
- 计算价格, java中浮点数精度丢失的解决方案
- (转)编译android5.1,添加swap分区的方法
- ios开发之--MJRefresh的简单使用
- STL_算法_05_集合算法
- Thinking in Java之衍生类和基础类的初始化顺序