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;
+}