البدء السريع

الاستيراد الكامل

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 الخاص بالمستودع.