需求说明:组件实现单选、多选功能,在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>中直接引用该组件,可以拿到数组类型的值