说到这里还是要谈谈的，因为其实在如今，layui中的很多组件，其实都已经不是那么的流行了，不过像layui中的很多组件写的还是非常非常牛掰的。
接下来的话其实就说说layui中的layer（其实也就是弹出层组件）
必不可少的还是要在页面中引入css样式以及js文件，这样的话我们才可以去使用layui
这种方式来打开弹窗，open方法中参数为一堆options配置对象<br /> 我们可以大体的看一下open的配置项<br /> type:弹出框类型（主要介绍三种）<br /> type：0（简单的像弹出层内容放置的是文本）</p>
<pre class=](https://www.mushiming.com/uploads/202410/28/c3a6b3ddf6f96a7d.png)
我们如果设置type类型是0的话，content内容展示的其实也就是字符串文本
当然我们如果想要在弹窗中去使用表单形式的验证的话，那么就得让type =1/2
如果type：1的话，其实就相当于展示的是一个html文本
你可以将其理解为vue的v-html
react的dangerouslySetInnerHTML
其实也就是将content的内容以html的样式呈现，也就是说我们可以在这个content中编写html样式代码了。
来看一下效果
这个时候我们如果点击下方的提交其实也就会触发表单的提交事件
我们来看
这是对应绑定的submit提交事件
当我们点击提交之后触发的效果我们来看
触发了表单校验规则，其实首先就是我们需要在表单中添加一个 lay-verify=“required”
这个lay-verify的值我们可以自定义，官方其实也给我们配置好了几个值，我在这边使用的其实就是required，不允许为空。
具体的可以参考官网
当然我们因为是弹窗我们肯定要用弹窗中的确认按钮，而我们现在触发表单事件所选取的按钮是form表单中的按钮，这对强迫症的我是及其难受的，在这里的话有一种解决方式。
首先我们要在open中添加一个btn:[‘确认’，‘取消’]
代码实现效果可以尝试着测试一下，也就是当我们点击确定之后先进行表单校验，当校验通过后，去触发form表单中的submit提交事件click方法，实现点击弹出层的确定从而触发表单的校验。
至于type：2，其实就是一个ifram子页面，这个的话其实也差不多content直接指定地址就可以了。大体的话其实弹窗就是这些，其他一些参数我们用到看官网查其实就可以了。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/9772.html