ConfigProvider 全局配置

何时使用

需要统一设置组件尺寸、层级，或局部覆盖主题 CSS 变量时使用。

主题变量覆盖

<script setup lang="ts">
import { DanButton, DanConfigProvider } from '@dandan-ui/ui'
</script>

<template>
  <DanConfigProvider size="large" :theme="{ 'color-primary': '#0f766e' }">
    <DanButton type="primary">大型青绿主按钮</DanButton>
  </DanConfigProvider>
</template>

统一尺寸

切换下方尺寸后，输入框与按钮会一起变化。

<script setup lang="ts">
import { ref } from 'vue'
import { DanButton, DanConfigProvider, DanInput } from '@dandan-ui/ui'

const size = ref<'small' | 'default' | 'large'>('large')
</script>

<template>
  <div style="display: grid; gap: 12px">
    <div style="display: flex; gap: 8px">
      <DanButton
        size="small"
        :type="size === 'small' ? 'primary' : 'default'"
        @click="size = 'small'"
      >
        small
      </DanButton>
      <DanButton
        size="small"
        :type="size === 'default' ? 'primary' : 'default'"
        @click="size = 'default'"
      >
        default
      </DanButton>
      <DanButton
        size="small"
        :type="size === 'large' ? 'primary' : 'default'"
        @click="size = 'large'"
      >
        large
      </DanButton>
    </div>
    <DanConfigProvider :size="size">
      <div
        style="display: flex; gap: 8px; align-items: center; max-width: 420px"
      >
        <DanInput placeholder="继承尺寸" style="flex: 1" />
        <DanButton type="primary">按钮</DanButton>
      </div>
    </DanConfigProvider>
  </div>
</template>

API

Props

属性	说明	类型	默认值	必填
size	向下提供的默认控件尺寸	'small' | 'default' | 'large'	'default'	否
zIndex	浮层类组件起始层级（预留给 Dialog 等）	number	2000	否
namespace	CSS / BEM 命名空间前缀	string	'dan'	否
theme	局部覆盖 CSS 变量	Record<string, string>	{}	否

theme 写法

key 示例	实际写入
color-primary	--dan-color-primary（自动加 --{namespace}-）
--dan-color-primary	原样使用完整变量名

Slots

插槽名	说明	作用域参数
default	子树内容，可嵌套表单、按钮等组件	—

注入上下文

子组件可通过内部 injectConfig() 读取：

字段	类型	说明
size	Ref<DanSize>	默认尺寸
zIndex	Ref<number>	浮层起点
namespace	Ref<string>	命名空间

注意事项

• 使用 display: contents，一般不会破坏原有布局。
• 可多层嵌套；更内层的 Provider 优先生效。