重構微信小程序單選（Radio)、多選(checkbox)組件

需求說明：組件實現單選、多選功能，在form中點擊提交可以拿到值

貼上代碼：

wxml:

<view class="component {{theme}}">
    <view class="radio_item {{item.disabled?'cur':''}}" wx:for="{{range}}" wx:key  bind:tap="tapChose" data-num="{{index}}">
        <block wx:if="{{mode=='radio'}}">
            <view name="radio" class="radio {{num==index?'cur':''}}"> 
                <image wx:if="{{num==index}}" mode="aspectFit" src="/assets/imgs/icon/success.png"></image>
            </view>
        </block>
        <block wx:if="{{mode=='checkbox'}}">
            <view name="radio" class="radio {{item.chosed?'cur':''}}">   
                <image wx:if="{{item.chosed}}" mode="aspectFit" src="/assets/imgs/icon/success.png"></image>
            </view>
        </block>        
        <text class="label">{{item.text}}</text>
    </view>
</view>

wxss:(tip:開發的時候用的是scss)

.radio_item{
    display: flex;
    margin-bottom:20rpx;
}
.radio_item.cur{
    .radio{
        background-color: #f5f5f5;
    }    
}
.radio{
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
    border: 2rpx solid #e6e6e6;
    image{
        display: block;
        width: 60%;
        height: 60%;
    }
}
.radio.cur{
    border: 2rpx solid #09BB07;
    background-color: #09BB07;
}

比較重要的js：

Component({
    behaviors: ['wx://form-field'],
    properties: {
        name:{
            type:String,
        },
        mode:{
            type:String,
            value:'radio',           
        },
        value:{
            type:Array,
            value:[],           
        },
        theme:{
            type:String,
            value:'default',
        },
        range:{//disabled:true不可選中；chosed:true，已選中
            type: Array,
            value:[{code:'aaa',text:'第一排',disabled:false,chosed:true}]
        },
    },
    data: {        
        num:null,
    },
    methods: {        
        tapChose:function(evt){
            let _num = evt.currentTarget.dataset.num;
            if (this.data.range[_num].disabled) {
                return ;
            }  
            if (this.data.mode=='radio') {                
                this.setData({
                    num:_num,
                    value:[this.data.range[_num].code],
                });                
            }else if(this.data.mode=='checkbox'){
                let _range = this.data.range;   
                let _value =[];             
                _range[_num].chosed=!_range[_num].chosed;
                _range.forEach((v,i) => {
                    if (v.chosed) {
                        _value.push(v.code)
                    }
                });
                this.setData({
                    range:_range,
                    value:_value
                });

            }        
            let data=this.data.value;    
           this.triggerEvent('Change',data) 
        },
        
    }    
})

json：

{
  "component": true,
  "usingComponents": {}
}

如何引入頁面我就不寫了，有問題請提問

說明：通過傳入對應的數據，實現單選框、多選框的組件化應用，因爲微信自帶的樣式比較難調節，就自己做了一個在項目中使用

在表單<form>中直接引用該組件，可以拿到數組類型的值