クイックスタート

全量読み込み

import Vue from 'vue'
import LhUIVue2 from '@lh-ui/vue2'
import '@lh-ui/vue2/theme.css'

Vue.use(LhUIVue2)

オンデマンド読み込み（推奨、tree-shaking に有利）

import Vue from 'vue'
import { LhButton, LhInput } from '@lh-ui/vue2'
import '@lh-ui/vue2/theme.css'
// コンポーネントごとのスタイルを個別に読み込み（副作用による負担なし、各コンポーネントのドキュメント先頭の説明を参照）
import '@lh-ui/vue2/style/button'
import '@lh-ui/vue2/style/input'

Vue.use(LhButton)
Vue.use(LhInput)

グローバル設定（任意）

LhConfigProvider でアプリケーションのルートを包裹し、サイズ、言語、テーマ変数を一元設定します。

<template>
  <LhConfigProvider size="medium" locale="zh-CN" :theme-vars="{ 'primary-color': '#2B4C7C' }">
    <router-view />
  </LhConfigProvider>
</template>

v-model と .sync

Vue2 のセマンティクスと本ライブラリの約束事：

• フォームコントロールの双方向バインディング：<LhInput v-model="text" />（内部では model: { prop: 'modelValue', event: 'input' }）
• ダイアログの表示切替：<LhDialog :visible.sync="show" />（.sync は update:xxx イベントの約束事、Dialog は v-model もサポート）

命令的 API

import { t, setLocale } from '@lh-ui/vue2'
setLocale('en-US')
t('input.placeholder') // 'Please input'

警告

Vue 2.7 環境における注意事項と完全な制約事項（動的プロパティのリアクティブ性、Teleport のないオーバーレイ方案など）については、リポジトリの AGENTS.md を参照してください。