小程序 uView 增大选择面积

最新推荐文章于 2025-06-04 10:56:33 发布

lovely you

最新推荐文章于 2025-06-04 10:56:33 发布

阅读量789

点赞数 9

文章标签：小程序前端 uniapp

本文链接：https://blog.youkuaiyun.com/lovelyYou123/article/details/135846706

版权

本文介绍了在Vue框架中使用UViewUI库开发的应用中，如何实现checkbox组件的选中操作、事件传递以及增大可点击区域的方法，重点在于`checkSel`函数、`onCardClick`事件处理和`checkboxChange`回调的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <view class="answer">
            <u-checkbox-group placement="column" @change="groupMultipleChange">
              <view v-for="(answerItem, i) in item.answerBankList" :key="i" @click.capture="checkSel(i)">
                <view @click.self.capture="onCardClick">
                  <u-checkbox ref="checkbox" @change="checkboxChange" :customStyle="{
                    marginBottom: '12px', padding: '28rpx 42rpx',
                    background: '#FFFFFF',
                    borderRadius: '16rpx',
                    marginBottom: '18rpx',
                    color: '#333',
                    fontSize: '32rpx',

                  }" :label="formatAnswerName(i, answerItem)" :name="answerItem.id">
                  </u-checkbox>
                </view>
              </view>

            </u-checkbox-group>
          </view>

关键点：

  checkSel (i) {
      this.checkIndex = i
    },
    onCardClick (event) {
      const { checkbox } = this.$refs;
      let index = this.checkIndex;
      if (!checkbox[index]) return;
      checkbox[index].iconClickHandler(event); // 把事件交给checkbox处理
      checkbox[index].preventEvent(); // 必须，阻止checkbox的默认行为
    },
    checkboxChange (e) {
      console.log(`复选框状态`, e);
    },

先获取最外层的index，然后再找到ref对应的这个checkbox。将事件传给checkBox