单选按钮组件

概述

单选按钮在项目开发中使用非常拼单，如性别、商品上架状态、类型等等，很多地方都需要引入单选按钮，传统的开发中表单引入单选按钮，然后通过JS事件处理来获得单签选中的状态是哪一个，可能有事选择时还会需要实现一些点击事件来控制其他一些元素的呈现与否，鉴于实际的场景，我们对传统的单选按钮做了组件化封装，即:单选按钮组件

组件原理

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

<div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男" checked="">
        <input type="radio" name="sex" value="女" title="女">
        <input type="radio" name="sex" value="禁" title="禁用" disabled="">
    </div>
</div>

实际效果如下图所示：

代码部分也算不上很多，但是总是觉得还不够精简，不够方便，当前我们根据选择按钮的不同去触发事件去控制其他控件的显示与隐藏时也需要写大量的JS去处理，过程繁琐，鉴于传统的这种开发模式，觉得不够方便和灵活，我们的框架立项之初的要求就要是组件化、灵活化、可维护性，要能够从根本上降低开发成本的同时提交开发效率，所以我们对复选框这一控件进行了封装。

绑定数据源

• 组件：{:widget('common/radio',array('city_id|name|id',$cityList,isset($info['city_id']) ? $info['city_id'] : 0))}

• 参数name：city_id|name|id

`city_id`：组件名称`city_id`,此字段对应实体对象中的字段city_id(对应到数据表中字段即为`city_id`);
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；

• 参数$cityList：绑定到组件上的数据源；

• 参数isset($info['city_id']) ? $info['city_id'] : 0)： 绑定到该组件上的已选中的数值，为空时默认给的值是1,这个默认值可以自行设定；

• 组件使用

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

<form class="layui-form model-form" action="">
    <div class="layui-form-item style="width:625px;">
        <label class="layui-form-label">区域：</label>
        <div class="layui-input-block">
            {:widget('common/radio',array('city_id|name|id',$cityList,isset($info['city_id']) ? $info['city_id'] : 0))}
        </div>
    </div>
</form>

• 效果展示：