Отличия API от версии Vue3

Эта библиотека делит чистые функции core из @lh-ui/share с @lh-ui/vue3 (plus), имена Props и событий в основном совпадают. Ниже — неизбежные отличия, обусловленные целевыми платформами uni-app; для всех API, не перечисленных здесь, поведение совпадает с версией для Vue3.

icon: шрифт вместо инлайн SVG

	Версия для Vue3 (plus)	Эта библиотека
Способ рендеринга	Инлайн <svg><path>	<text class="lh-iconfont lh-iconfont--<name>">
Цвет	currentColor (наследуется от родительского color)	Явный prop color / родительский color (цвет шрифта CSS, семантически эквивалентно)
Размер	prop size	prop size (устанавливает font-size)

Mini Program не поддерживает тег <svg>, поэтому на этапе сборки набор SVG path из share преобразуется в шрифт iconfont (base64 встранивается в iconfont.css; 37 иконок, 24×24, однотонные). Визуально это те же глифы, но по сути — шрифт, поэтому в CSS нельзя использовать fill / stroke, только color.

input: стиль плейсхолдера через props

MP не поддерживает псевдоэлемент ::placeholder. Стиль плейсхолдера задаётся через props:

<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 Mini Program
Клавиатурная навигация (стрелки / Enter / Esc)	✅	❌ Удаляется на этапе компиляции
focus-trap (контур фокуса в диалоге)	✅	❌ Не вызывается на этапе компиляции
lockScroll (блокировка прокрутки фона)	✅	❌ (fallback — перехват кликов маской)
Срабатывание по hover (tooltip)	✅	❌, заменено на click / touchstart

trigger у tooltip: по-прежнему поддерживает 'click' | 'hover', но в Mini Program у hover нет семантики — на платформе MP используйте trigger="click" (или значение по умолчанию), срабатывание по клику / касанию.

События select не меняются (update:modelValue / change / visible-change), но «очистить» и «выбрать» в MP можно только кликом по элементу listbox, клавиатурного пути нет.

message / loading: паттерн точки монтирования

Это самое большое отличие в способе использования. В версии для Vue3 — createApp + mount в document.body, вызов — и сообщение появляется; в Mini Program нет document, поэтому сначала нужно разместить компоненты-точки монтирования:

<!-- Разместить один раз на странице -->
<lh-message />
<lh-loading />

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

loading.show({ text: 'Загрузка...' })
// ...
loading.close()

См. подробнее в Установка - Императивные сервисы требуют точку монтирования.

Компонент Notification отсутствует в первом выпуске

В версии для Vue3 есть lh-notification, в этой библиотеке первого выпуска его нет (низкая ценность в Mini Program, уведомления обычно идут через системные возможности). Если нужно уведомление-подсказка, используйте lh-message.

config-provider: тёмная тема через класс, а не через document

	Версия для Vue3	Эта библиотека
Переключение тёмной темы	Добавление класса на document.documentElement	Добавление класса dark на оборачивающий узел (в Mini Program нет 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, артефакты библиотеки будут преобразованы вместе с остальным кодом, дополнительно ничего делать не нужно.

Опции Mini Program, объявленные в 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 на уровне проекта компонентное объявление.