# 增加checkbox复选框的面积 其实u-checkbox组件提供label插槽供你放右边内容，但这种方式难以满足全部的布局需求，一旦布局复杂起来或者你已经做完了卡片只是想增加一个复选框功能就不宜大改结构，需要在逻辑层面动手。 模板部分： ```jsx <!-- 内部触发的所有click事件先给onCardClick处理 --> <div @click.self.capture="onCardClick" style="width: 200px;height: 200px;border: 1px solid red"> <u-checkbox-group> <u-checkbox ref="checkbox" @change="onCheckboxChange"></u-checkbox> </u-checkbox-group> 这是卡片内容 </div> ``` JS部分： ```js onCardClick(event) { const {checkbox} = this.$refs; if(!checkbox) return; checkbox.iconClickHandler(event); // 把事件交给checkbox处理 checkbox.preventEvent(); // 必须，阻止checkbox的默认行为 }, onCheckboxChange(status) { console.log(`复选框状态：${status}`); } ``` > 本文作者：不爱喝橙子汁