在这里主要记录一些本人在使用
layui
与后端进行交互时的一些相关操作。如果本文章帮助到了您,可以点个赞,有问题也可以在评论区留言。我看到后会统一回复的。
在使用之前,记得自己先引入layui
相关的模块。 如下:
<link id="layuicss-layer" rel="stylesheet" href="https://res.layui.com/layui/dist/css/modules/layer/default/layer.css?v=3.1.1" media="all">
<script src="//res.layui.com/layui/dist/layui.js?t=1603620926702" charset="utf-8"></script>
Layui使用ajax请求
用法如下:
<button class="layui-btn layui-btn-sm layui-bg-orange" onclick="dele(这里传你要删除的id);">删除</button>
js代码如下:
<script>
function dele(id){
layui.use('layer',function(){
var layer = layui.layer;
layer.msg('你确定删除么?', {
time: 2000 ,//2秒自动关闭
btn: ['确定', '取消'],
yes: function(index){
console.log(id);
$.ajax({
url:"ajax地扯",
data:{'id':id},
type:"Post",
dataType:"json",
success:function(data){
console.log(data);
layer.msg(data.msg);
location.reload(); //删除成功后再刷新
},
error:function(data){
$.messager.alert('错误',data.msg);
}
});
layer.close(index);
}
});
});
};
</script>
效果图如下:
layer.msg的使用
js代码如下:
layer.msg('只想弱弱提示');
layer.msg('表情提示', {icon: 6});
layer.msg('关闭后想做些什么呢', function(){
//自动执行这里面的内容
});
// 第三种
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
//2秒后自动执行这里面的内容
});
layui弹窗的使用
关键代码如下:
var truelogin = "admin";
var truepwd = "123456";
layui.use('layer', function () {
var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
var index = layer.alert(msgalert, {
icon: 6, //icon数字参数
time: 2000, //时间(默认是毫秒),2000为 2秒
offset: 't', //t为顶部,b为底部,m为中间,r为右侧,l为左侧
closeBtn: 0, //是否显示弹出窗右上角的关闭按钮 0为不显示 ,1为显示。
title: '友情提示', //弹出窗的标题
btn: [], //弹出窗的底部按钮
anim: 2,
shade: 0
});
layer.style(index, {
color: '#777'
});
});
Layui弹窗加载页面
用法如下:
<div class="layui-input-inline add_admin" style="width:95px;">
<a class="layui-btn layui-btn-sm" href="javascript:void(0);">
<i class="layui-icon"></i>添加管理员
</a>
</div>
js代码如下:
<script>
layui.use(['element','jquery','layer'], function(){
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
$('.add_admin').click(function () {
layer.open({
type: 2,
title:'添加管理员',
skin: 'layui-layer-rim', //加上边框
maxmin: true, //开启最大化最小化按钮
area: ['600px', '400px'],
content:"加载的页面地扯,比如:http://www.baidu.com"
});
});
});
</script>
layui开关switch的使用
主要应用场景:
- 产品中的某个字段:上架或者下架。比如(1 代表
上架
,0 代表下架
) - 某些状态:只有 0 或 1 的这种情况。
- 还有就是
显示
或隐藏
了。
用法如下:
<input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|关闭" lay-filter="switchTest" value="1">
<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
<em>ON</em><i></i>
</div>
js代码如下:
<script>
// 状态监听开关
layui.use(['form'], function () {
var form = layui.form
, layer = layui.layer
//监听指定开关
form.on('switch(switchTest)', function (data) {
if (this.checked) {
layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅 仅是ON|OFF', data.othis)
} else {
layer.msg('开关: 关掉了', {
offset: '6px'
});
}
//do some ajax opeartiopns;
});
});
</script>
效果图如下:
layer加载动画效果
var loading = layer.load(2,{shade:false,time:2000});
解释:
- 2 代表的是加载的风格。有 0,1,2。
- shade:false 代表的是 不显示遮罩。如果为 true 就会有遮罩。
- time:2000 代表的是 加载等待时间。2000毫秒也就是 2 秒后加载层就会关闭。
关闭loading
(可以在ajax成功或失败回调中进行关闭) :
layer.close(loading);
注意:load默认不会自动关闭
实战
应用:删除某个产品我想要先弹出一个加载层,然后等待3秒的时间再进行删除的操作。另外加的一个功能是:禁止一次性点击多次,采用 3秒后才能再进行点击。
html
<button type="button" class="layui-btn layui-btn-danger del_template" data-tid="222">删除</button>
js
$(".del_template").click(function() {
let tid = $(this).attr("data-tid");
$(this).attr("disabled", "true");
let loading = layer.load(2, {
shade: false,
time: 2000
});
setTimeout(function() {
$(this).attr("disabled", "false");
$.ajax({
type: "POST",
url: "/user/del_template",
data: {
"tid": tid
},
dataType: "json",
success: function(data) {
layer.close(loading); // 关闭加载层
if (data.status_code === 200) {
layer.msg(data.msg, {
icon: 6,
time: 2000
},
function() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.window.location.reload();
});
} else {
layer.msg(data.msg, {
icon: 2,
time: 1200
})
}
}
})
},
2000);
});
后端返回的json数据
- 后端路由:
/user/del_template
- 请求方式:
post
- 发送的参数:
tid
- 返回成功的结果
- 删除成功的返回:
{
"msg":"删除成功",
"status_code":200
}
- 返回失败的结果
- 删除失败的返回:
{
"msg":"删除失败",
"status_code":201
}
加载动画下增加文字提示
layer.load(2, { //icon支持传入0-2
shade: [0.4, '#000'],
//0.5透明度的灰色背景
offset: ['40%', '45%'],
//位置
content: '正在加载中...',
success: function(layero) {
layero.find('.layui-layer-content').css({
'color': '#fff',
'padding-top': '78px',
'padding-left': '13px',
'width': '60px',
'font-size': '16px'
});
}
});
layer.confirm的相关使用
询问层简单的使用
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
解释:
- title 询问层标题
- btn 里面放按钮的文本内容。两个文本就对应两个
function
。
效果图如下:
询问层里的icon详解
icon:0 黄色叹号
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 0,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:1 绿色勾选
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 1,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:2 红色错误
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 2,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:3 黄色问号
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 3,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:4 灰色加密
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 4,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:5 红色坏脸
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 5,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下:
icon:6 绿色笑脸
layer.confirm("删除该文件夹会同时删除里面的文件", {
title: "提示标题",
icon: 6,
btn: ['确认删除', '取消']
},
function() {
console.log("确认删除");
},
function() {
console.log('取消');
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
效果图如下: