# 增加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}`); } ``` > 本文作者：不愛喝橙子汁