Open
Description
What problem does this feature solve
1、做主题开发的过程中,部分交互需要调整默认配置来实现
2、现有版本中已经通过designConfig开放部分配置选项,但目前实现方式为在组件中硬编码来适配,未做适配的属性就无法支持配置
3、如果能够配置所有的 props 选项,主题定制会更加灵活
What does the proposed API look like
1、增加 hoc 组件
import { type SetupContext, ref } from 'vue'
import { design, hooks, $prefix } from '../../index'
import { getComponentName } from '../index'
export default function DesignConfigPropsHOC() {
return (BaseComponent: any) => {
return {
...BaseComponent,
props: {},
setup(props, { attrs, slots, expose }: SetupContext) {
const innerRef = ref()
// 获取组件级配置和全局配置(inject需要带有默认值,否则控制台会报警告)
let globalDesignConfig: DesignConfig = hooks.inject(design.configKey, {})
// globalDesignConfig 可能是响应式对象,比如 computed
globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
const designConfigProps = designConfig?.props || {}
const mergedProps = { ...designConfigProps, ...attrs }
expose(
new Proxy(
{},
{
get(_target, key) {
return innerRef.value?.[key]
},
has(_target, key) {
return innerRef.value?.[key]
}
}
)
)
return () => {
return (
<BaseComponent {...mergedProps} {...attrs} ref={innerRef}>
{slots}
</BaseComponent>
)
}
}
}
}
}
2、将组件用 HOC 包裹
3、在对应 designConfig 中配置默认props,如base-select中配置默认不显示全部选项
4、实现 base-select默认不展示全部选项
What is your project name
无