اختلافات API عن نسخة Vue3

يتشارك هذا المسجل مع @lh-ui/vue3 (plus) الدوالّ النقية للنواة في @lh-ui/share، وتظل تسمية Props والأحداث متطابقة في الغالب. فيما يلي الفروق الحتمية الناتجة عن المنصات المستهدفة لـ uni-app؛ وكل API لم يُذكَر هنا فسلوكه مطابق لنسخة Vue3.

icon: عرض بالخط بدل SVG المضمّن

	نسخة Vue3 (plus)	هذا المسجل
طريقة العرض	<svg><path> مضمّن	<text class="lh-iconfont lh-iconfont--<name>">
اللون	currentColor (يرث لون العنصر الأب)	prop صريح color / لون العنصر الأب (لون خط CSS، ودلالتهما متكافئة)
الحجم	prop الحجم size	prop الحجم size (يضبط font-size)

لا يدعم البرنامج المصغر وسم <svg>، لذا تُحوَّل الأيقونات في وقت البناء من مجموعة مسارات SVG في share إلى خط iconfont (مضمّن base64 في iconfont.css، 37 أيقونة، 24×24 بلون واحد). والنتيجة بصريًا هي نفس الأشكال، لكنها خط في جوهرها، لذا لا يمكن استخدام fill / stroke في CSS، بل color فقط.

input: أنماط العنصر النائب عبر prop

لا يدعم MP العنصر الزائف ::placeholder. استخدم prop لأنماط العنصر النائب:

<lh-input placeholder="أدخل النص" placeholder-style="color: #999" />

prop	الوصف
placeholder-style	سلسلة الأنماط المضمّنة للنص النائب
placeholder-class	اسم صنف النص النائب (بديل عن style)

بقية API (v-model وmaxlength وعدّاد الأحرف show-word-limit وtype) مطابقة لنسخة Vue3.

select / dialog / tooltip: القدرات على مستوى سطح المكتب في H5 فقط

القدرة	H5	برنامج WeChat المصغر
التنقل بلوحة المفاتيح (أسهم الاتجاهات / Enter / Esc)	✅	❌ يُزال في وقت الترجمة
focus-trap (دائرة تركيز مربع الحوار)	✅	❌ لا يُستدعى في وقت الترجمة
lockScroll (قفل تمرير الخلفية)	✅	❌ (اعتراض القناع كحل احتياطي)
الإطلاق عبر hover (tooltip)	✅	❌، يُستبدل بـ click / touchstart

trigger الخاص بـ tooltip: لا يزال يدعم 'click' | 'hover'، لكن hover بلا دلالة في البرنامج المصغر — استخدم trigger="click" (أو القيمة الافتراضية) في طرف البرنامج المصغر، ليُطلَق عبر النقر / اللمس.

أحداث select لا تتغير (update:modelValue / change / visible-change)، لكن «الإفراغ» و«الاختيار» في طرف MP يتمان فقط عبر النقر على عناصر listbox، دون مسار بلوحة المفاتيح.

message / loading: نمط نقطة التركيب

هذا أكبر اختلاف في طريقة الاستخدام. تعتمد نسخة Vue3 على createApp + التركيب إلى document.body فيُظهر الاستدعاء الرسالة فورًا؛ أما البرنامج المصغر فلا يوجد فيه document، ولذا يجب وضع مكوّن نقطة التركيب أولًا:

<!-- يُوضع مرة واحدة في الصفحة -->
<lh-message />
<lh-loading />

const { success, closeAll } = useLhMessage()
const loading = useLhLoading()

loading.show({ text: 'جارٍ التحميل...' })
// ...
loading.close()

راجع التثبيت - الخدمات الحتمية تحتاج نقطة تركيب.

غياب مكوّن Notification في الإصدار الأول

تملك نسخة Vue3 مكوّن lh-notification، لكن هذا المسجل لا يوفّره في الإصدار الأول (قيمته منخفضة على طرف البرنامج المصغر، إذ عادة ما تُسلَّم الإشعارات عبر قدرات النظام). عند الحاجة إلى تنبيه من نوع إشعار استخدم lh-message بديلًا.

config-provider: الوضع الداكن عبر فئة وليس document

	نسخة Vue3	هذا المسجل
تبديل الوضع الداكن	إضافة فئة إلى document.documentElement	إضافة فئة dark إلى العقدة المغلّفة (لا يوجد document في البرنامج المصغر)
prop theme	'light' | 'dark'	مثله (مع اختلاف التنفيذ الداخلي)

لا تتغير طريقة الاستخدام، وهي في الحالتين <lh-config-provider :theme="dark">. وفي هذا المسجل تكون متغيّرات الوضع الداكن في theme/index.css داخل page.dark, .dark، لذا يتبع نطاق الوضع الداكن العقدة التي يغلّفها ConfigProvider.

الوحدات: px مباشرة

لا يقوم هذا المسجل بتحويل px إلى rpx، فمصدر الأنماط يُخرَج مباشرةً بوحدة px — وهو ما يتوافق مع wot-design-uni / uview-plus / uni-ui / TDesign وغيرها من مكتبات uni الشائعة (ولا يحوّل المترجم الرسمي لـ uni px إلى rpx تلقائيًا). وإن كان مشروعك يستخدم إضافة مثل postcss-px-to-rpx، فستُحوَّل نواتج هذه المكتبة معها، دون الحاجة إلى معالجة خاصة.

خيارات البرنامج المصغر المدمجة في SFC المكوّنات

يصرّح كل مكوّن SFC بما يلي:

defineOptions({
  name: 'LhXxx',
  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' },
})

• virtualHost: true — لا يُنشئ المكوّن عقد تغليف زائدة، فيمكن لـ custom-class / customStyle الوصول إلى العنصر المستهدف.
• addGlobalClass: true — يمكن استخدام الأنماط العامة داخل المكوّن (app.wxss / أنماط الصفحة).
• styleIsolation: 'shared' — عزل الأنماط في الوضع المشترك، بحيث ترى أنماط المكوّن وأنماط الصفحة بعضها.

لا يحتاج المستخدم إلى ضبط هذه العناصر الثلاثة في pages.json أو إعدادات المشروع — فهي مصرَّح بها أصلًا داخل ملف json الخاص بكل مكوّن. وإن بدا أن أنماط المكوّن غير مطبّقة (الأصناف موجودة كلها لكن الأنماط لا تظهر)، فتحقق أولًا مما إذا كان إعداد styleIsolation في المشروع قد غطّى على تصريح المكوّن.