fix: check component change tag to name

Tencent · Sep 15, 2024 · 1edc3b2 · 1edc3b2
1 parent 08828c5
commit 1edc3b2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/src/checkbox/__tests__/index.test.jsx b/src/checkbox/__tests__/index.test.jsx
@@ -157,14 +157,18 @@ describe('Checkbox CheckboxGroup', () => {
   describe('@event', () => {
     it('Event passthrough', async () => {
       const wrapper = mount({
+        components: {
+          ACheckboxGroup: CheckboxGroup,
+          ACheckbox: Checkbox,
+        },
         render() {
           return (
-            <CheckboxGroup>
-              <Checkbox value="gz">广州</Checkbox>
-              <Checkbox value="sz" disabled>
+            <a-checkbox-group>
+              <a-checkbox value="gz">广州</a-checkbox>
+              <a-checkbox value="sz" disabled>
                 深圳
-              </Checkbox>
-            </CheckboxGroup>
+              </a-checkbox>
+            </a-checkbox-group>
           );
         },
       });

diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx
@@ -13,6 +13,7 @@ import intersection from 'lodash/intersection';
 import isObject from 'lodash/isObject';
 import isUndefined from 'lodash/isUndefined';
 import { VNode } from 'vue';
+import { getVNodeComponentName, getVueComponentName } from '../utils/helper';
 import Checkbox from './checkbox';
 import props from './checkbox-group-props';
 import { CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue } from './type';
@@ -196,7 +197,8 @@ export default defineComponent({
       if (!nodes) return;
       for (let i = 0, len = nodes.length; i < len; i++) {
         const vNode = nodes[i];
-        if (vNode.componentOptions && /TCheckbox/.test(vNode.tag)) {
+        const componentName = getVNodeComponentName(vNode);
+        if (vNode.componentOptions && componentName && componentName === getVueComponentName(Checkbox)) {
           (vNode.componentOptions.propsData as any).storeKey = storeKey;
         }
         if (vNode.children?.length) {

diff --git a/src/list/hooks/useListItem.ts b/src/list/hooks/useListItem.ts
@@ -1,5 +1,7 @@
 import { VNode } from 'vue';
 import { computed, getCurrentInstance } from '@vue/composition-api';
+import { getVNodeComponentName, getVueComponentName } from '../../utils/helper';
+import ListItem from '../list-item';
 
 const useListItems = () => {
   const instance = getCurrentInstance();
@@ -8,7 +10,8 @@ const useListItems = () => {
   const listItems = computed(() => {
     const computedListItems: VNode[] = [];
     currentSlots.forEach((child) => {
-      if (child.componentOptions?.tag === 't-list-item') {
+      const componentName = getVNodeComponentName(child);
+      if (componentName && componentName === getVueComponentName(ListItem)) {
         computedListItems.push({
           class: child.data.staticClass,
           style: child.data.staticStyle,

diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts
@@ -8,6 +8,9 @@ import {
 } from '@vue/composition-api';
 import { VNode } from 'vue';
 import get from 'lodash/get';
+import { getVNodeComponentName, getVueComponentName } from '../../utils/helper';
+import Option from '../option';
+import OptionGroup from '../optionGroup';
 import {
   TdSelectProps, TdOptionProps, SelectOptionGroup, SelectValue,
 } from '../type';
@@ -62,7 +65,8 @@ export default function useSelectOptions(
       // 处理 slots 中 t-option 与 t-option-group
       const currentSlots = instance.proxy.$slots.default || [];
       currentSlots.forEach((child) => {
-        if (child.componentOptions?.tag === 't-option') {
+        const componentName = getVNodeComponentName(child);
+        if (componentName && componentName === getVueComponentName(Option)) {
           // 独立选项
           innerOptions.push({
             // 单独处理 style 和 class 参数的透传
@@ -74,7 +78,7 @@ export default function useSelectOptions(
             index: dynamicIndex,
           } as TdOptionProps);
           dynamicIndex += 1;
-        } else if (child.componentOptions?.tag === 't-option-group') {
+        } else if (componentName && componentName === getVueComponentName(OptionGroup)) {
           // 分组选项
           const groupOption = {
             group: (child.componentOptions.propsData as TdOptionProps)?.label,

diff --git a/src/utils/helper.ts b/src/utils/helper.ts
@@ -1,4 +1,5 @@
 import camelCase from 'lodash/camelCase';
+import type { VNode } from 'vue';
 
 export function omit(obj: object, fields: string[]): object {
   const shallowCopy = {
@@ -153,3 +154,11 @@ export function setTransform(value: string): object {
     '-webkit-transform': value,
   };
 }
+
+export function getVueComponentName(component: any) {
+  return component?.options?.name || component?.name;
+}
+
+export function getVNodeComponentName(vnode: VNode) {
+  return (vnode?.componentOptions?.Ctor as any)?.options?.name;
+}