Select update class does not take effect

[jackhe16]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.2.0-beta.2

Environment

mac os 10.15.6, chrome 87.0.4280.141, vue 3.1.1

Reproduction link

https://github.com/jackhe16/antdv-select-attrs-class

Steps to reproduce

见 https://github.com/jackhe16/antdv-select-attrs-class

What is expected?

更新Select组件的class应该生效

What is actually happening?

更新Select组件的class没有生效

---

vue3官网中有相关描述

attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

Select组件源码相关代码

const mergedClassName = computed(() =>
classNames(
{
[`${prefixCls.value}-lg`]: props.size === 'large',
[`${prefixCls.value}-sm`]: props.size === 'small',
[`${prefixCls.value}-rtl`]: props.direction === 'rtl',
[`${prefixCls.value}-borderless`]: !props.bordered,
},
attrs.class,
),
);

setup中监听不到attrs.class的变化, 因此更新class没有生效。

有以下几种解决思路

• 在onUpdated中修改

const mergedClassName = ref(classNames(
{
[`${prefixCls.value}-lg`]: props.size === 'large',
[`${prefixCls.value}-sm`]: props.size === 'small',
[`${prefixCls.value}-rtl`]: props.direction === 'rtl',
[`${prefixCls.value}-borderless`]: !props.bordered,
},
attrs.class,
));
onUpdated(() => {
mergedClassName.value = classNames(
{
[`${prefixCls.value}-lg`]: props.size === 'large',
[`${prefixCls.value}-sm`]: props.size === 'small',
[`${prefixCls.value}-rtl`]: props.direction === 'rtl',
[`${prefixCls.value}-borderless`]: !props.bordered,
},
attrs.class,
)
});

• mergedClassName计算放到render中

• 参考element-plus useAttrs

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.