layui.layer弹层组件官方文档
layer.open的type参数有5个不同的值,如果要自定义弹窗内容,可以使用 type: 1(页面层)。
使用页面层,则参数content可填写html或使用dom,本次我使用的dom方法。
1、首先在body外编写一个表单(主要是防止被其他元素所影响)
<form action="" id="create_table_from" class="layui-form" lay-filter="create_table_from" style="display: none;">
<div class="layui-form-item">
<label class="layui-form-label">工单名称</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入工单名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属分类</label>
<div class="layui-input-block">
<select name="type_id" lay-verify="required">
<option value=""></option>
<option value="1">默认分类</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">工单说明</label>
<div class="layui-input-block">
<textarea name="description" placeholder="请输入工单说明" class="layui-textarea"></textarea>
</div>
</div>
</form>
- 一定要设置好form的id以及lay-filter参数,方便后续获取表单
- 表单需要先隐藏display: none;
2、表单写好后,开始配置layer.open参数
layer.open({
//基本层类型
type:1,
//宽高
area:['600px','500px'],
//标题
title: '创建新工单',
//内容
content: $('#create_table_from'),
//按钮
btn:['创建','取消'],
//确定按钮
yes:() => {
//开启loading
const loading = layer.load(2);
//获取表单内的所有值
const formData = layui.form.val("create_table_from");
//发送数据到接口
$.post('__URL__/table/post_table', formData, (res)=>{
//关闭loading
layer.close(loading);
console.log(res);
});
},
});
- 通过layui.form.val()来获取表单内的所有值,参数为html中lay-filter设置的值
效果图:
- 本次代码中有引入JQ