ConfigProvider 設定

透過 provide/inject 為子元件提供全域設定，支援主題、尺寸、國際化統一管理。

基礎用法

預設尺寸：

小型尺寸：

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- 預設尺寸 -->
  <LhButton>默认按钮</LhButton>
  <!-- 主要按鈕（停用） -->
  <LhButton type="primary" disabled>主要按钮</LhButton>
  <!-- 小型尺寸 -->
  <LhConfigProvider :size="'small'">
    <!-- 小按鈕 -->
    <LhButton>小按钮</LhButton>
    <!-- 小主要 -->
    <LhButton type="primary">小主要</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <!-- 預設尺寸 -->
  <LhButton>默认按钮</LhButton>
  <!-- 主要按鈕（停用） -->
  <LhButton type="primary" disabled>主要按钮</LhButton>
  <!-- 小型尺寸 -->
  <LhConfigProvider :size="'small'">
    <!-- 小按鈕 -->
    <LhButton>小按钮</LhButton>
    <!-- 小主要 -->
    <LhButton type="primary">小主要</LhButton>
  </LhConfigProvider>
</template>

自訂主題色

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>默认</LhButton>
    <LhButton type="primary">金色主题</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#e6a23c' }">
    <LhButton>默认</LhButton>
    <LhButton type="primary">金色主题</LhButton>
  </LhConfigProvider>
</template>

按元件設定主題（componentTheme）

透過 componentTheme 可為指定元件單獨覆寫主題變數，優先級高於全域 themeVars。

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button 金黃主題 -->
    <LhButton type="primary">Button 金黄主题</LhButton>
    <!-- Success 不受影響 -->
    <LhButton type="success">Success 不受影响</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider
    :component-theme="{ button: { 'primary-color': '#e6a23c' } }"
  >
    <!-- Button 金黃主題 -->
    <LhButton type="primary">Button 金黄主题</LhButton>
    <!-- Success 不受影響 -->
    <LhButton type="success">Success 不受影响</LhButton>
  </LhConfigProvider>
</template>

花紋背景白名單（patternComponents）

透過 patternComponents 指定哪些元件支援花紋背景效果。

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">柳叶花纹</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">祥云花纹</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

<template>
  <LhConfigProvider :pattern-components="['button']">
    <LhButton bg-pattern="var(--lh-pattern-willow)">柳叶花纹</LhButton>
    <LhButton bg-pattern="var(--lh-pattern-cloud)">祥云花纹</LhButton>
  </LhConfigProvider>
</template>

bg-pattern 的值是 CSS 變數（如 var(--lh-pattern-willow)）或圖片 URL，直接寫花紋名（如 willow）無效。更多花紋名稱請參考花紋定製。

國際化

透過 locale 設定全域語言包。

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const currentLocale = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
function toggleLocale() {
  locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    currentLocale() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="currentLocale">
    <LhButton @click="toggleLocale">
      {{ locale === 'zh-CN' ? 'Switch to English' : '切换中文' }}
    </LhButton>
  </LhConfigProvider>
</template>

ConfigProvider API

Props

屬性名	說明	類型	預設值
size	全域尺寸	`LhSizes`	—
locale	國際化設定	`LocaleType`	—
themeVars	全域主題變數	`{ [x: string]: string; }`	—
patternComponents	花紋背景白名單	`[LhThemeableComponent](#type-LhThemeableComponent)`[]	—
componentTheme	按元件名稱設定主題變數	{ button?: Record<string, string>; input?: Record<string, string>; dialog?: Record<string, string>; tooltip?: Record<string, string>; icon?: Record<string, string>; card?: Record<string, string>; alert?: Record<string, string>; popover?: Record<string, string>; popconfirm?: Record<string, string>; drawer?: Record<string, string>; dropdown?: Record<string, string>; message?: Record<string, string>; notification?: Record<string, string>; loading?: Record<string, string>; timeline?: Record<string, string>; collapse?: Record<string, string>; rate?: Record<string, string>; segmented?: Record<string, string>; calendar?: Record<string, string>; affix?: Record<string, string>; backtop?: Record<string, string>; image?: Record<string, string>; menu?: Record<string, string>; table?: Record<string, string>; layout?: Record<string, string>; tree?: Record<string, string>; transfer?: Record<string, string>; upload?: Record<string, string>; anchor?: Record<string, string>; steps?: Record<string, string>; }	—

Slots

插槽名	說明
default	需要設定的元件內容

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/config-provider/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhThemeableComponent

/**
 * 可設定主題的元件名稱集合
 */
export type LhThemeableComponent =
  | 'button'
  | 'input'
  | 'dialog'
  | 'tooltip'
  | 'icon'
  | 'card'
  | 'alert'
  | 'popover'
  | 'popconfirm'
  | 'drawer'
  | 'dropdown'
  | 'message'
  | 'notification'
  | 'loading'
  | 'timeline'
  | 'collapse'
  | 'rate'
  | 'segmented'
  | 'calendar'
  | 'affix'
  | 'backtop'
  | 'image'
  | 'menu'
  | 'table'
  | 'layout'
  | 'tree'
  | 'transfer'
  | 'upload'
  | 'anchor'
  | 'steps'

LhConfigProviderProps

/**
 * ConfigProvider 設定項
 */
export interface LhConfigProviderProps {
  /** 全域尺寸 */
  size?: LhSizes
  /** 全域語言 */
  locale?: LocaleType
  /** 全域主題變數
   * 支援鍵（會自動添加 --lh- 前綴）：
   * - `primary-color`, `success-color`, `warning-color`, `danger-color`, `info-color`
   * - `gold-color`, `vermilion-color`, `jade-color`
   * - `bg-color`, `text-color`, `border-color`
   * - `bg-pattern` — 花紋背景 URL（如 `var(--lh-pattern-willow)`）
   * - `bg-pattern-opacity` — 花紋透明度
   * - `bg-pattern-color` — 花紋顏色
   * - `decoration-color` — 裝飾色 */
  themeVars?: Record<string, string>
  /** 啟用背景花紋的元件白名單
   * 只有白名單中的元件會套用全域 `themeVars` 中的 bg-pattern
   * 空陣列或 undefined 表示所有元件均停用背景花紋
   * 元件自身透過 `bgPattern` 或 `themeVars` 傳入的花紋不受此限制
   */
  patternComponents?: LhThemeableComponent[]
  /** 按元件單獨設定主題變數（覆寫全域 themeVars）
   * 鍵為元件名，值為該元件的主題變數物件
   * 優先級: 元件自身 props > componentTheme[元件名] > 全域 themeVars
   */
  componentTheme?: Partial<Record<LhThemeableComponent, Record<string, string>>>
}

ConfigProvider 設定 ​

基礎用法 ​

自訂主題色 ​

按元件設定主題（componentTheme） ​

花紋背景白名單（patternComponents） ​

國際化 ​

ConfigProvider API ​

Props ​

Slots ​

類型定義 ​