ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 动态显示(Favisible) 动态显示组件是一个非常强大的按逻辑验证动态显示元素的组件,常用于一些组件的按需显示和联动显示。 ### 功能特性 1、支持多操作符验证逻辑,目前支持`>、>=、<、<=、==、!=` 2、支持正则验证逻辑 3、支持多条件验证,逻辑与`&&`逻辑或`||`条件验证支持 ### 使用方法 给你的表单中的需要按逻辑动态显示的元素添加`data-favisible="条件逻辑表达式"`即可。 目前在`配置管理`中`添加配置`的`可见条件`可以直接使用 ### 条件逻辑表达式 | 表达式 | 说明 | | --- | --- | | mode=basic | 当表单中的`mode`组件值为`basic`时显示 | | mode=basic,advanced | 当表单中的`mode`组件值为`basic`或`advanced`时显示 | | age>=23 | 当表单中的`age`组件值大于等于23时显示 | | age=regex:/\\d+/i | 当表单中的`age`组件值匹配任意数字时显示 | | mode=basic&&type=hobby | 当表单中的`mode`组件值为`basic`且`type`值为`hobby`时显示 | | mode=basic\|\|gender=male | 当表单中的`mode`组件值为`basic`或`gender`值为`male`时显示 | | mode=basic&&name=Lily\|\|gender=male | 当表单中的(`mode`组件值为`basic`且`name`为`Lily`) 或`gender`值为`male`时显示 | ### 不支持的多条件表达式 ~~~ini mode=basic||gender=male&&mode=advanced||name=Lily ~~~ 以上逻辑表达式将按`或条件`拆分为3段,并不支持按`与条件`拆分为2段。 HTML代码 ~~~xml <form class="layui-form" method="post"> <input type="radio" name="row[type]" value="value1" checked /> 类型1 <input type="radio" name="row[type]" value="value2" /> 类型2 <div data-favisible="type=value1">显示内容1</div> <div data-favisible="type=value2">显示内容2</div> </form> ~~~ JS代码 ~~~less Form.bindevent($("form.layui-form")); ~~~ ### 温馨提示 表单中的名称必须为`row[组件名称]`,如`name="row[组件名称]"` 当元素隐藏后,表单将忽略必填验证 当条件逻辑表达式的操作符为`>、>=、<、<=`时,将强制把验证的值做`parseFloat`转换。 逻辑表达式的名称只支持`字母、数字、下划线`