Практические действия: clickOutside tooltip autofocus
Создавайте многоразовые действия для распространённых шаблонов интерфейса
«Практические действия: clickOutside tooltip autofocus» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Действие clickOutside
Определяйте щелчки за пределами элемента, чтобы закрывать меню и раскрывающиеся списки.
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}Используйте clickOutside
Передайте функцию обратного вызова, которая выполняется, когда пользователь щёлкает за пределами элемента.
<div use:clickOutside={() => open = false}>Действие автофокусировки
Устанавливайте фокус на элементе при монтировании — это проще, чем сочетание bind:this и onMount.
function autofocus(node) { node.focus(); }Используйте автофокусировку
Применяйте её к полям ввода или любому элементу, который может получить фокус.
<input use:autofocus />Действие подсказки
Показывайте подсказку при наведении. Инкапсулируйте обработчики событий и создание DOM в одном действии.
Действие lazyLoad
Объединяйте IntersectionObserver с use:, чтобы загружать изображения по требованию.
Действие clickConfirm
Требуйте два щелчка в течение заданного интервала, чтобы подтвердить потенциально разрушительные операции.
Повторное использование в компонентах
После создания действие работает с любым совместимым элементом. Храните действия в $lib/actions.
Библиотеки действий
Пакеты вроде svelte-use поставляются с десятками готовых действий.
Составляйте действия
Применяйте несколько действий к одному элементу: use:autofocus use:clickOutside={close}.
Рекомендация
Каждое действие должно отвечать за одно поведение. Для более сложных эффектов объединяйте действия.
Быстрая проверка
Что требуется действию clickOutside?
Итоги
Практические действия, такие как clickOutside, автофокусировка и подсказка, показывают, как инкапсулировать повторно используемое поведение DOM.
Часто задаваемые вопросы
Урок «Практические действия: clickOutside tooltip autofocus» бесплатный?
Да — полный текст урока «Практические действия: clickOutside tooltip autofocus» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Практические действия: clickOutside tooltip autofocus»?
Создавайте многоразовые действия для распространённых шаблонов интерфейса Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Практические действия: clickOutside tooltip autofocus»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис директивы use:
- Параметры и обновления действий
- Функция очистки destroy()
- Практические действия: clickOutside tooltip autofocus