uview checkbox和radio选择框自定义触发change事件

checkout选择框自定义触发change事件

首先在某些场景下 uview选择框 内容在左,选择框在右的布局下 无法实现点击内容触发选择框事件 我们可以通过ref获取checkbox-group的实例 自行触发实例中的方法

<u-checkbox-group ref="checkboxGroupRef" @change="checkboxGroupChange">
  <view >
    <view @click="checkboxChange(item)">
      <view ></view>
      <view >
        <view ></view>
      </view>
    </view>
    <u-checkbox shape="circle" v-model="item.checked"></u-checkbox>
  </view>
</u-checkbox-group>

checkboxChange(item) {
    item.checked = !item.checked  // 改变选中状态
    this.$refs.checkboxGroupRef.emitEvent() // 触发group中的change事件
},

radio选择框自定义触发change事件

radio选择框同理 通过ref获取radio-group的实例 自行触发实例中的方法

<u-radio-group ref="radioGroupRef" v-model="name" @change="radioGroupChange">
<view v-for="(item, index) in list" :key="index">
  <view @click="radioChange(item)">
    <view>
      <view>{{ item.name }}</view>
    </view>
    <view>
      <u-radio :name="item.name"></u-radio>
    </view>
  </view>
</view>
</u-radio-group>

radioChange(item) {
    this.$refs.radioGroupRef.setValue(item.name) // 触发group中的change事件 传入选中值 change方法中会直接改变选中状态
},

结尾: 当前使用的是uview1.x版本 使用uview2.x可能需要配合源码调整