ConfigProvider 設定

為子樹提供全域尺寸、語言與主題變數。provide 的是 computed 引用（非快照），provider 的 prop 變化會即時傳導給所有消費元件。

局部主題定制

<template>
  <div class="demo-col" style="gap: 20px">
    <LhConfigProvider
      :theme-vars="{
        'primary-color': '#4a6741',
        'bg-color': '#f4f7ee',
        'text-primary': '#2c2a26',
        'text-regular': '#5a5a5a',
      }"
      :pattern-components="['button', 'tag']"
    >
      <div
        style="
          padding: 16px;
          background: var(--lh-bg-color);
          border: 1px dashed var(--lh-primary-color);
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        "
      >
        <LhButton type="primary">竹青主題按鈕</LhButton>
        <LhTag type="primary">竹青標籤</LhTag>
        <LhInput placeholder="竹青輸入框" style="width: 180px" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">themeVars 覆蓋全域 --lh-* 變數；patternComponents 白名單內的元件才套用 bg-pattern。</p>
    <LhConfigProvider
      :theme-vars="{ 'primary-color': '#8b5a2b' }"
      :component-theme="{ button: { 'primary-color': '#2f6f5e' }, tag: { 'primary-color': '#2f6f5e' } }"
    >
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap">
        <LhButton type="primary">松綠按鈕（componentTheme 單獨覆蓋）</LhButton>
        <LhTag type="primary">松綠標籤</LhTag>
      </div>
    </LhConfigProvider>
    <p class="demo-note">componentTheme 按元件單獨覆蓋（優先級高於全域 themeVars）。</p>
    <LhConfigProvider size="large" locale="en-US">
      <div style="padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center">
        <LhInput placeholder="size=large" style="width: 180px" />
        <LhPagination :total="50" :page-size="10" />
      </div>
    </LhConfigProvider>
    <p class="demo-note">size 全域尺寸 + locale 切換語言包（分頁器文案變為英文）。</p>
  </div>
</template>

Props

屬性	說明	類型	預設值
size	全域尺寸（子元件未顯式傳 size 時生效）	LhSizes	—
locale	全域語言（watch immediate 同步 lhlocale 單例）	LhLocaleType	—
themeVars	全域主題變數（鍵可省略 --lh- 前綴）	Record<string, string>	—
patternComponents	bg-pattern 生效白名單	LhThemeableComponent[]	—
componentTheme	按元件覆蓋主題變數	Partial<Record<Component, Vars>>	—

組合 API

import { useLhConfigContext } from '@lh-ui/vue2'
// 自訂元件內注入：返回 ComputedRef<LhConfigContext> | null
const ctx = useLhConfigContext()

警告

命令式服務（new Vue 掛載）不繼承 provide/inject 上下文，讀全域 size/locale 走 lhlocale 單例。