Skip to content

✨ [Feature]: 组件增加HOC,实现支持在design Config中全局配置默认props #2940

Open
@hashiqi12138

Description

@hashiqi12138

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 包裹

Image

3、在对应 designConfig 中配置默认props,如base-select中配置默认不显示全部选项

Image

4、实现 base-select默认不展示全部选项

Image

What is your project name

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request (功能增强)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions