fix(checkbox): modify mobile problem (#2666)

Author: James-9696

examples/sites/demos/mobile/app/checkbox/checkbox-group.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="checkbox-wrap">
     <tiny-checkbox-group v-model="checked">
-      <tiny-checkbox label="复选框1"></tiny-checkbox>
-      <tiny-checkbox label="复选框2"></tiny-checkbox>
+      <tiny-checkbox label="复选框1">复选框1</tiny-checkbox>
+      <tiny-checkbox label="复选框2">复选框2</tiny-checkbox>
     </tiny-checkbox-group>
     <p>当前选中的值为：{{ checked }}</p>
   </div>

packages/mobile/components/checkbox-group/src/mobile.vue

@@ -26,16 +26,19 @@
 
 <script lang="tsx">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '../../../vue-common'
 import Checkbox from '../../checkbox'
 import { CheckboxGroupProps } from './checkbox-group'
 import '@opentiny/vue-theme-mobile/checkbox-group/index.less'
 
 export default defineComponent({
+  name: $prefix + 'CheckboxGroup',
+  componentName: 'CheckboxGroup',
   components: {
     Checkbox
   },
   props: CheckboxGroupProps,
+  emits: ['change', 'update:modelValue'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }

packages/mobile/components/checkbox/src/checkbox.ts

@@ -13,6 +13,28 @@ import { $prefix } from '../../../vue-common'
 import type { PropType } from '../../../vue-common'
 import type { ExtractPropTypes, ComputedRef } from 'vue'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from '../../../types/shared.type'
+
+import type {
+  addToStore,
+  removeFromStore,
+  computedStore,
+  computedFormItemSize,
+  computedIsChecked,
+  computedIsLimitDisabled,
+  computedIsDisabled,
+  computedIsDisplayOnly,
+  computedIsGroupDisplayOnly,
+  computedGetModelGet,
+  computedIsGroup,
+  computedCheckboxSize,
+  computedGetModelSet,
+  mounted,
+  handleChange,
+  computedDisplayLabel,
+  computedIsShowText,
+  computedShowText
+} from './renderless'
+
 export type { ISharedRenderlessParamHooks } from '../../../types/shared.type'
 
 export type IconPosition = 'center' | 'top'
@@ -75,27 +97,6 @@ export const checkboxProps = {
   }
 }
 
-import type {
-  addToStore,
-  removeFromStore,
-  computedStore,
-  computedFormItemSize,
-  computedIsChecked,
-  computedIsLimitDisabled,
-  computedIsDisabled,
-  computedIsDisplayOnly,
-  computedIsGroupDisplayOnly,
-  computedGetModelGet,
-  computedIsGroup,
-  computedCheckboxSize,
-  computedGetModelSet,
-  mounted,
-  handleChange,
-  computedDisplayLabel,
-  computedIsShowText,
-  computedShowText
-} from './renderless'
-
 export type ICheckboxSizeEnum = 'medium' | 'small' | 'mini'
 export type ICheckboxModalValue = string | number | boolean
 

packages/mobile/components/checkbox/src/mobile.vue

@@ -64,11 +64,13 @@
 
 <script lang="ts">
 import { renderless, api } from './renderless/vue'
-import { setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '../../../vue-common'
 import { checkboxProps } from './checkbox'
 import '@opentiny/vue-theme-mobile/checkbox/index.less'
 
 export default defineComponent({
+  name: $prefix + 'Checkbox',
+  componentName: 'Checkbox',
   props: checkboxProps,
   emits: ['update:modelValue', 'change', 'complete', 'click'],
   setup(props, context) {

packages/mobile/components/checkbox/src/renderless/index.ts

@@ -111,10 +111,9 @@ export const computedIsChecked =
   }
 
 export const computedIsGroup =
-  ({ state, parent, constants }: Pick<ICheckboxRenderlessParams, 'state' | 'parent' | 'constants'>) =>
+  ({ state, vm, constants }: Pick<ICheckboxRenderlessParams, 'state' | 'vm' | 'constants'>) =>
   (): boolean => {
-    let parentObj = parent.$parent
-
+    let parentObj = vm.$parent
     while (parentObj) {
       if (parentObj.$options.componentName !== constants.CHECKBOX_GROUP) {
         parentObj = parentObj.$parent

packages/mobile/components/checkbox/src/renderless/vue.ts

@@ -108,7 +108,7 @@ const initApi = ({
     computedIsDisplayOnly: computedIsDisplayOnly({ state, props }),
     computedIsGroupDisplayOnly: computedIsGroupDisplayOnly({ state }),
     computedGetModelGet: computedGetModelGet({ state, props }),
-    computedIsGroup: computedIsGroup({ state, parent, constants }),
+    computedIsGroup: computedIsGroup({ state, vm, constants }),
     computedCheckboxSize: computedCheckboxSize({ state, props, formItemSize }),
     computedGetModelSet: computedGetModelSet({ state, dispatch, emit, constants }),
     mounted: mounted({ emit, props, api, parent }),