breaking change(Checkbox): need @click.stop inside a cell #7023

docs/markdown/migrate-from-v2.zh-CN.md

@@ -172,6 +172,10 @@ Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位
 - 绿色按钮对应的类型由 `primary` 调整为 `success`
 - `native-type` 的默认值由 `submit` 调整为 `button`
 
+#### Checkbox
+
+- 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡
+
 #### Dialog
 
 - 默认关闭 `allow-html` 属性

src/checkbox/Checker.tsx

@@ -64,15 +64,8 @@ export default defineComponent({
 
       if (!disabled.value && (iconClicked || !props.labelDisabled)) {
         emit('toggle');
-
-        // wait for toggle method to complete
-        // so we can get the changed value in the click event listener
-        setTimeout(() => {
-          emit('click', event);
-        });
-      } else {
-        emit('click', event);
       }
+      emit('click', event);
     };
 
     const renderIcon = () => {

src/checkbox/README.md

@@ -184,7 +184,11 @@ export default {
       @click="toggle(index)"
     >
       <template #right-icon>
-        <van-checkbox :name="item" :ref="el => checkboxes[index] = el" />
+        <van-checkbox
+          :name="item"
+          :ref="el => checkboxes[index] = el"
+          @click.stop
+        />
       </template>
     </van-cell>
   </van-cell-group>

src/checkbox/README.zh-CN.md

@@ -204,7 +204,11 @@ export default {
       @click="toggle(index)"
     >
       <template #right-icon>
-        <van-checkbox :name="item" :ref="el => checkboxes[index] = el" />
+        <van-checkbox
+          :name="item"
+          :ref="el => checkboxes[index] = el"
+          @click.stop
+        />
       </template>
     </van-cell>
   </van-cell-group>

src/checkbox/demo/index.vue

@@ -96,7 +96,7 @@
             @click="toggle(index)"
           >
             <template #right-icon>
-              <van-checkbox :ref="setRefs(index)" :name="item" />
+              <van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
             </template>
           </van-cell>
         </van-cell-group>

src/checkbox/index.js

@@ -62,15 +62,8 @@ export default createComponent({
       },
     });
 
-    let toggleTimer;
     const toggle = (newValue = !checked.value) => {
-      // When toggle method is called multiple times at the same time,
-      // only the last call is valid.
-      // This is a hack for usage inside Cell.
-      clearTimeout(toggleTimer);
-      toggleTimer = setTimeout(() => {
-        checked.value = newValue;
-      });
+      checked.value = newValue;
     };
 
     watch(