开关组件

概述

开关控件也是非常多见的表单元素了，在很多模块开发中，我们常用需要设置数据的状态：开启、关闭，固定的两种值，这是选择开关控件就是费用不错的选项了，另外还有很多情况下，当前我们点击开关时也需要设置某些区域内的控件的显示与隐藏，这是也需要写JS去处理一些业务逻辑，总体来说不够简洁，还在某些情况下，比如数据列表中也会置入开关，我们依然已开关状态开启、关闭为例，此时需要开关的点击像后台发起状态发生改变的请求等等，各种场景都要求我们要集成和增强开关按钮这个控件，因此我们对开关组件进行了封装和二次开发，下面我们会进行详细的解读；

组件原理

组件UI部分我们借助Layui开源的控件元素来实现的，Layui中的复选框组件的形式如下：

<div class="layui-form-item">
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
        <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
</div>

实际效果如下图所示：

以上代码就是原始的开关代码部分，也比较简洁，但是功能比较单一，很多场景还需要我们写一些业务相关的JS去实现部分功能，比如上面我们所说的点击开发时发起网络请求以及显示和隐藏某些区域控件。

Switch组件

• 组件：<widget:switchCheck name="status" data="正常|停用" th:value="${info['status']} ?: 1"/>

• 参数：

nname="status"：name参数的值status表示switch组件的名称，此字段对应实体对象中的字段和数据库字段，根据业务不同可以自动修改该字段；

• 组件使用

那么我们如何在表单中使用单选按钮组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">拼音(简)：</label>
				<div class="layui-input-inline">
					<input name="code" th:value="${info['code']}" lay-verify="required" autocomplete="off" placeholder="请输入拼音(简)" class="layui-input" type="text">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">有无封面：</label>
				<div class="layui-input-inline">
					<widget:switchCheck name="isCover" data="有|无" th:value="${info['isCover']} ?: 2" hidden="cover"/>
				</div>
			</div>
		</div>
		<div class="layui-form-item cover">
			<label class="layui-form-label">封面：</label>
			<widget:uploadSingleImage name="cover|封面|90x90|itemcate|建议上传尺寸450x450" th:value="${info['cover']}"/>
		</div>
</form>

分析：如上所示，switch组件中有一个属性hidden="cover"设置此属性时，会自动拥有使得class中含有cover的控件或元素进行显示和隐藏，至于逻辑处理，全部有组件帮我们去完成，我们只需要会使用就OK。

• 效果展示：