一篇文章彻底搞懂layui框架中的弹窗(layer)

首先,还是那句话什么是弹窗,其实也就是个小弹出层 alert?

在这个年代,各位前端小哥哥小姐姐们,是不是用惯了element-ui、antD中的弹出层。
其实现在的话,接着就是谈谈layui这个2016年推出来的前端框架。

说到这里还是要谈谈的,因为其实在如今,layui中的很多组件,其实都已经不是那么的流行了,不过像layui中的很多组件写的还是非常非常牛掰的。
接下来的话其实就说说layui中的layer(其实也就是弹出层组件)
必不可少的还是要在页面中引入css样式以及js文件,这样的话我们才可以去使用layui
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200909080606506.png#pic_center

首先可以先做一个小案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layer</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
  </head>
  <body>
    <div id="layerBtn" class="layui-btn">弹出layui按钮</div>
  </body>
</html>
<script>
  // 挂载layui,添加jquery和form 一会我们会用到
  layui.use(['layer', 'jquery', 'form'], function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面,有助于我们调用
    var layer = layui.layer
    var $ = layui.jquery
    var form = layui.form
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.msg('我调用了,我是layer弹窗')
    })
  })
</script>

在这里插入图片描述

其实layer中的msg也就是一个小提示吧算是。
当然我们真正运用到弹窗的话肯定要用到一些其他的功能,layui也在观望中给出了我们详细的配置。
像type、time、icon…
其实我们在这里的话主要就是来说一下弹窗的另一种打开方法

layer.open()这种方式来打开弹窗,open方法中参数为一堆options配置对象
我们可以大体的看一下open的配置项
type:弹出框类型(主要介绍三种)
type:0(简单的像弹出层内容放置的是文本)

      layer.open({
        type: 0,//type类型
        title:'文本'//弹窗标题
        content: '文本问二苯二而被本吧',//弹窗内容
      })

在这里插入图片描述
我们如果设置type类型是0的话,content内容展示的其实也就是字符串文本
当然我们如果想要在弹窗中去使用表单形式的验证的话,那么就得让type =1/2

如果type:1的话,其实就相当于展示的是一个html文本
你可以将其理解为vue的v-html
react的dangerouslySetInnerHTML
其实也就是将content的内容以html的样式呈现,也就是说我们可以在这个content中编写html样式代码了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layer</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
  </head>
  <body>
    <div id="layerBtn" class="layui-btn">弹出layui按钮</div>
  </body>
  <div style="display: none" id="biaodan">
    <form class="layui-form" lay-filter="form">
      <div>usrname:<input lay-verify="required" style="width: 30%" type="text" class="layui-input" /></div>
      <div>password:<input style="width: 30%" lay-verify="required" type="text" class="layui-input" /></div>
      <button id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button>
    </form>
  </div>
</html>
<script type="text/html" id="biaodan"></script>
<script>
  // 挂载layui,添加jquery和form 一会我们会用到
  layui.use(['layer', 'jquery', 'form'], function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面,有助于我们调用
    var layer = layui.layer
    var $ = layui.jquery
    var form = layui.form
    form.render(null, 'form')
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.open({
        type: 1,
        title: '表单验证',
        area: ['80%', '80%'],//弹框大小  屏幕宽度的80%,高度的80%;
        content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板,可以将其理解为指定一个组件,当然也是可以自己去写的,像'<div>我是一个内容</div>'
        // 打开弹窗的回调函数,用于回显页面数据
        success: function () {
          console.log('我打开了弹窗')
        },
      })
    })
    // 表单提交事件
    form.on('submit(submit)', function (data) {
      console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
      console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
      return false //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    })
  })
</script>

来看一下效果
在这里插入图片描述
这个时候我们如果点击下方的提交其实也就会触发表单的提交事件
我们来看

    // on的第一个参数括号中绑定的submit其实也就是 lay-filter的值
    form.on('submit(submit)', function (data) {
      console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
      console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
      return false //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    })

这是对应绑定的submit提交事件
在这里插入图片描述
当我们点击提交之后触发的效果我们来看
在这里插入图片描述
触发了表单校验规则,其实首先就是我们需要在表单中添加一个 lay-verify=“required”
这个lay-verify的值我们可以自定义,官方其实也给我们配置好了几个值,我在这边使用的其实就是required,不允许为空。
具体的可以参考官网
当然我们因为是弹窗我们肯定要用弹窗中的确认按钮,而我们现在触发表单事件所选取的按钮是form表单中的按钮,这对强迫症的我是及其难受的,在这里的话有一种解决方式。
首先我们要在open中添加一个btn:[‘确认’,‘取消’]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layer</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
  </head>
  <body>
    <div id="layerBtn" class="layui-btn">弹出layui按钮</div>
  </body>
  <div style="display: none" id="biaodan">
    <form class="layui-form" lay-filter="form">
      <div>usrname:<input name="username" id="username" lay-verify="required" style="width: 30%" type="text" class="layui-input" /></div>
      <div>password:<input name="password" id="password" style="width: 30%" lay-verify="required" type="text" class="layui-input" /></div>
      <!-- dispaly设置为none,否则页面加载就会渲染 -->
      <button style="display: none" id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button>
    </form>
  </div>
</html>
<script type="text/html" id="biaodan"></script>
<script>
  // 挂载layui,添加jquery和form 一会我们会用到
  layui.use(['layer', 'jquery', 'form'], function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面,有助于我们调用
    var layer = layui.layer
    var $ = layui.jquery
    var form = layui.form
    var isSubOk = false
    var mengIndex = 0
    form.render(null, 'form')
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.open({
        type: 1,
        title: '表单验证',
        area: ['80%', '80%'],
        content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板,可以将其理解为指定一个组件,当然也是可以自己去写的,像'<div>我是一个内容</div>'
        btn: ['确认', '取消'],
        yes: function (index, layero) {
          // 获取当前蒙版层的索引
          mengIndex = index
          $('#submit').click()
        },
        btn2: function (index, layero) {
          layer.close(index)
        },
        // 打开弹窗的回调函数,用于回显页面数据
        success: function () {
          // 清除上一次的数据
          isSubOk = false
          $('#username').val('')
          $('#password').val('')
          console.log('我打开了弹窗')
        },
      })
    })
    // 表单提交事件
    form.on('submit(submit)', function (data) {
      isSubOk = true
      console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
      console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}

      // 我们可以再次发起请求
      // $.ajax   我在这里使用settimeout进行伪造一个异步请求
      setTimeout(() => {
        // 我们根据全局定义的meng版索引来关闭这个蒙版,假装就是当请求成功时就关闭这个蒙版
        layer.close(mengIndex)
      }, 2000)

      return false //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    })
  })
</script>

代码实现效果可以尝试着测试一下,也就是当我们点击确定之后先进行表单校验,当校验通过后,去触发form表单中的submit提交事件click方法,实现点击弹出层的确定从而触发表单的校验。

至于type:2,其实就是一个ifram子页面,这个的话其实也差不多content直接指定地址就可以了。大体的话其实弹窗就是这些,其他一些参数我们用到看官网查其实就可以了。

  • 6
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
layui,可以使用弹出层来创建表单并进行提交。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui弹出层表单提交</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <button class="layui-btn" onclick="openForm()">打开表单</button> <!-- 表单弹出层 --> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use('layer', function(){ var layer = layui.layer; function openForm() { layer.open({ type: 1, title: '表单提交', area: ['500px', '300px'], content: ` <form class="layui-form" lay-filter="myForm"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button> </div> </div> </form> `, success: function(layero, index){ var form = layui.form; // 表单提交监听 form.on('submit(formSubmit)', function(data){ console.log(data.field); // 可以在这里进行提交表单数据的操作 layer.close(index); // 关闭弹出层 return false; // 阻止表单默认提交 }); } }); } }); </script> </body> </html> ``` 在上述代码,点击"打开表单"按钮后,会弹出一个包含姓名输入框和提交按钮的弹出层。当点击提交按钮时,会触发表单提交监听函数,你可以在该函数进行表单数据的处理和提交操作。同时,弹出层会被关闭。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值