一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

我们开发中常常遇到ui设计的选择框的样式比较美丽，而我们用框架自带的checkbox和radio比较丑的时候，就需要动手自己写一个美丽的组件了。我们一起看看吧！

checkbox组件

如图实现一个复选的组件和一个单选的组件。需要的时候直接在页面调用

html代码

<checkbox-group bindchange="checkboxChange" class="checkbox-group">
    <view wx:for="{{checkboxArr}}" wx:key="index">
        <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap="checkbox" data-index="{{index}}">
            <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
        </label>
    </view>
</checkbox-group>

js代码

用到了2个方法，1个是点击单个选项的方法，一个是复选选中数组的方法

  data: {
  // 定义数据
    checkboxArr: [{
            checked: false,
            id: "1",
            name: "部门1"
        },
        {
            checked: false,
            id: "2",
            name: "部门2"
        },
        {
            checked: false,
            id: "3",
            name: "部门3"
        },
        {
            checked: false,
            id: "4",
            name: "部门4"
        },
        {
            checked: false,
            id: "5",
            name: "部门5"
        },
        {
            checked: false,
            id: "6",
            name: "部门6"
        }
    ],
}

选择数据，checkbox数组重新赋值

checkbox: function (e) {
    var index = e.currentTarget.dataset.index; // 获取当前点击的下标
    var checkboxArr = this.data.checkboxArr; // 选项集合
    checkboxArr[index].checked = !checkboxArr[index].checked; // l改变当前选中的checked值
    this.setData({
        checkboxArr: checkboxArr
    });
},

获取选择数据的值

checkboxChange: function (e) {
    var checkValue = e.detail.value;
    this.setData({
        checkValue: checkValue
    });
},

radio组件

有了上面的checkbox的代码，写起radio就很简单了。

html代码

<radio-group bindchange="radioChange" class="radio-group">
    <view wx:for="{{radioArr}}" wx:key="index">
        <label class="{{item.checked?'radio checked':'radio'}}" bindtap="radio" data-index="{{index}}">
            <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
        </label>
    </view>
</radio-group>

js代码

radioArr: [{
    checked: false,
    id: "1",
    name: "部门1"
},
{
    checked: false,
    id: "2",
    name: "部门2"
},
{
    checked: false,
    id: "3",
    name: "部门3"
},
{
    checked: false,
    id: "4",
    name: "部门4"
},
{
    checked: false,
    id: "5",
    name: "部门5"
},
{
    checked: false,
    id: "6",
    name: "部门6"
}],

radio选择的js

  radio:function(e){
    var index = e.currentTarget.dataset.index; // 获取当前点击的下标
    var radioArr = this.data.radioArr; // 选项集合
    radioArr.forEach(item=>{
        item.checked = false;
    })
    radioArr[index].checked = !radioArr[index].checked; // l改变当前选中的checked值
    this.setData({
        radioArr: radioArr
    });
},

css代码

复选框和单选框的样式相同，可以共用一套样式代码。

.checkbox-group,.radio-group {
    display: flex;
    flex-wrap: wrap;
}

.checkbox,.radio {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    color: #aaaaaa;
    border: 2rpx solid #CECECE;
    border-radius: 15rpx;
    justify-content: center;
    margin: 0 20rpx 20rpx;
}

.checked {
    color: #FB8337;
    background: rgba(251, 131, 55, 0.08);
    border: 1rpx solid #FB8337;
}

.checkbox-group checkbox,.radio-group radio {
    display: none
}

以上就是checkbox和radio的全部代码了，自己写起来并不复杂，只要封装成组件，在需要的时候调用，使用起来和自带的组件一样的效果。记录一下，温故而知新！