省级示范校建设网站站长工具关键词查询

为提升表单组件的视觉体验和交互性能，我们引入了基于 LayUI 框架的 UI 控件。通过简单的配置即可将现有的表单控件切换为 LayUI 风格，无需大幅修改原有代码结构。

使用方法

当前支持的标签包括但不限于：

• <xform:select>

• <xform:checkbox>

• <xform:radio>

• 等表单类控件

关键属性：useLayui

要启用 LayUI 控件，仅需在原有的标签中添加一个属性：

<xform:select name="example" useLayui="true"><xform:option value="1">选项一</xform:option><xform:option value="2">选项二</xform:option>
</xform:select>

添加 useLayui="true" 后，控件将自动渲染为 LayUI 样式的下拉框，并具备相应的样式和交互能力。

效果示例

启用后将自动绑定 LayUI 的渲染逻辑，具备更美观的样式和响应式交互体验。

支持的控件

本次支持的控件有：

地址本

下拉框

选择框

单行输入框

单行输入多语言框

多行文本输入框

多行输入多语言

数字输入框

为了效果多样，修改一下属性还能带上单位

日期控件

单选按钮

复选框

以上这些都是xform 标签增加属性变拥有layui库控件能力，为了方便大家开发定制，更加灵活通过前端js生成控件，拥有layui的能力，也增加了原生效果的这类控件，比如下拉框，单选，复选。只需要引入我们定义好的样式便可。

  <span class="ekp-radio"> //这一层标签可以是div/span/label等<input type="radio" class="ekp-radio-input" id="wf_branchType" name="wf_branchType"  value="2"><label for="wf_branchType"><span class="ekp-radio-text">radio文案</span></label>
</span>

class="ekp-radio" 和class ="ekp-radio-input"  是我们定义好的lay ui 样式。

总结

通过引入 useLayui="true" 属性，规范的class，开发者可以快速无缝地将传统表单控件升级为现代的 LayUI 风格，提升系统整体 UI 一致性和用户体验。