diff --git a/src/checkbox/__tests__/index.test.jsx b/src/checkbox/__tests__/index.test.jsx index aa5e9274f..4bb3bfe82 100644 --- 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 ( - - 广州 - + + 广州 + 深圳 - - + + ); }, }); diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx index 3a8f884e4..a595d608b 100644 --- a/src/checkbox/group.tsx +++ b/src/checkbox/group.tsx @@ -4,6 +4,7 @@ import { import intersection from 'lodash/intersection'; import isObject from 'lodash/isObject'; import isUndefined from 'lodash/isUndefined'; +import { getVNodeComponentName, getVueComponentName } from '../utils/helper'; import Checkbox from './checkbox'; import props from './checkbox-group-props'; import { CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue } from './type'; @@ -187,7 +188,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 index 6d9f9b388..fedc8005c 100644 --- a/src/list/hooks/useListItem.ts +++ b/src/list/hooks/useListItem.ts @@ -1,4 +1,6 @@ import { VNode, computed, getCurrentInstance } from 'vue'; +import { getVNodeComponentName, getVueComponentName } from '../../utils/helper'; +import ListItem from '../list-item'; const useListItems = () => { const instance = getCurrentInstance(); @@ -7,7 +9,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 index 0ced8b622..242925318 100644 --- a/src/select/hooks/useSelectOptions.ts +++ b/src/select/hooks/useSelectOptions.ts @@ -7,6 +7,9 @@ import { ref, Ref, computed, onBeforeUpdate, ComponentInternalInstance, watch, 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'; @@ -60,8 +63,9 @@ export default function useSelectOptions( innerSlotRecord = instance.$slots.default; // 处理 slots 中 t-option 与 t-option-group const currentSlots = instance.$slots.default || []; - currentSlots.forEach((child: any) => { - if (child.componentOptions?.tag === 't-option') { + currentSlots.forEach((child: VNode) => { + const componentName = getVNodeComponentName(child); + if (componentName && componentName === getVueComponentName(Option)) { // 独立选项 innerOptions.push({ // 单独处理 style 和 class 参数的透传 @@ -73,7 +77,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/tabs/tabs.tsx b/src/tabs/tabs.tsx index af81ad1b1..54092198a 100644 --- a/src/tabs/tabs.tsx +++ b/src/tabs/tabs.tsx @@ -1,5 +1,5 @@ import Vue, { VNode, VueConstructor } from 'vue'; -import kebabCase from 'lodash/kebabCase'; +import { getVNodeComponentName, getVueComponentName } from '../utils/helper'; import props from './props'; import TTabPanel from './tab-panel'; import TTabNav from './tab-nav'; @@ -68,9 +68,10 @@ export default mixins(Vue as VueConstructor, classPrefixMixi return; } const newPanels = this.listPanels + .filter((child) => getVNodeComponentName(child) === getVueComponentName(TTabPanel)) .map((panel: VNode) => panel.componentInstance as InstanceType) - .filter(Boolean) - .filter((child) => kebabCase(child?.$vnode?.tag).endsWith('t-tab-panel')); // 不可用classPrefix替换 此处是判断组件tag + .filter(Boolean); + const isUnchanged = () => newPanels.length === this.panels.length && this.panels.every((panel, index) => panel === newPanels[index]); if (isUnchanged() && !force) return; this.panels = newPanels; diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 705c5d40c..c4c2876fc 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -1,4 +1,5 @@ import camelCase from 'lodash/camelCase'; +import type { VNode } from 'vue'; import type { Styles } from '../common'; export function omit(obj: object, fields: string[]): object { @@ -154,3 +155,11 @@ export function setTransform(value: string): Styles { '-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; +}