Я заканчиваю свой первый проект со Stimulus и решил создать документ с примерами того, как мы можем реализовать различные функции с помощью этого фреймворка.
Я расскажу:
- Оповещение о подтверждении
- Предварительный просмотр загрузки изображения
- Автоматическая высота текстовой области
- Проверка формы
Если вы еще не знакомы со Stimulus — это простой фреймворк, позволяющий писать структурированный код JavaScript внутри контроллеров. Стимул имеет хорошую документацию на официальном сайте.
Оповещение о подтверждении
Цель состоит в том, чтобы информировать пользователей о том, что они собираются покинуть наш веб-сайт.
У нас есть атрибут data-action, который позволяет взаимодействовать с событиями кликов через showConfirmation функцию Confirmation контроллера.
Исходный код на CodePen и GitHub.
Предварительный просмотр загрузки изображения
У нас есть вход для загрузки изображений, и теперь нам нужно создать предварительный просмотр загруженного изображения и возможность его очистки.
Когда пользователь выбирает изображение, стимул выполняет updatePreview функцию. Он проверяет, были ли загружены какие-либо файлы, а затем показывает или скрывает предварительный просмотр.
Когда пользователь нажимает кнопку очистки загрузки, вызывается функция clearUpload. Он обнуляет значение входа загрузки и запускает updatePreview.
Исходный код на CodePen и GitHub.
Автоматическая высота текстовой области
Textarea не может увеличить свой размер до размера всего текста. Обычно мы хотим реализовать эту функцию.
Исходный код на CodePen и GitHub.
Проверка формы
Методов проверки очень много. Вот один из них:
Мы группируем входные данные по условиям проверки. Имя и фамилия должны быть заполнены хотя бы одним символом. Возраст должен быть равен или больше 18 лет.
Исходный код на CodePen и GitHub.
Спасибо за внимание!
Полная версия примеров здесь. Не стесняйтесь исправлять код и советовать новые варианты использования на основе вашего опыта 🙂
