предисловие
В последнее время я использую Vue+TypeScript для работы со своей собственной библиотекой компонентов, и за это время я на многое ссылался (копия 😂)element,iviewисходный код. Обнаружены некоторые часто используемые функции, часто сложные реализации. Поэтому я собираюсь написать серию статей, чтобы представить принципы, лежащие в основе этих компонентов. Сегодня первая статья, которая поможет вам реализовать компонент Notice.
Дизайн API
Обычно, когда мы используем компонент «Уведомление» iview или элемента, это происходит в форме вызова метода, смонтированного в цепочке прототипов Vue. Как показано ниже.
Метод вызова наших компонентов также относится к аналогичному дизайну, разница в том, что мы добавили новый APIsetLen. код показывает, как показано ниже
Это потому, что арендодатель однажды получил запрос.При создании toC для компании продукт не хотел, чтобы на экране было слишком много окон уведомлений, а только надеялся, что их будет максимум три одновременно. Все арендодатели добавили это требование настройки при разработке компонентов.
Поскольку нам нужно добиться отображения только определенного количества уведомлений на экране, мы используем два массива, содержащие экземпляры уведомлений. очередь очередь для хранения всех примеров уведомлений, например, уведомление showQueue отображается на экране.
Метод $Notice используется для добавления экземпляра уведомления в очередь, метод processQueue используется для обработки очереди, метод удаления используется для удаления конкретного уведомления, метод clear используется для очистки всех уведомлений. setLen используется для установки количества уведомлений, отображаемых на одном экране. Атрибут len — это максимальное количество одинаковых экранов.
Дизайн шаблона
Чего не скажешь о дизайне шаблона, штатной верстке. Компонент Icon — это компонент значка, который я написал ранее. showClose определяет, отображать ли значок Icon. visible управляет видимостью уведомления.
дизайн метода
$Notice
использоватьVue.extendметод для создания NoticeConstructor, который является подклассом Vue. Экземпляр NoticeConstructor, который вы можете использовать
Параметр Mount отображает DOM на страницу.
Внутри метода уведомления используйте uuid для генерации уникального идентификатора, этот уникальный тег поможет нам найти указанный объект уведомления в очереди. Далее мы обернем метод onClose.onClose будет вызываться каждый раз, когда уведомление будет закрыто, onClose вызывается внутри
Метод Notice.remove удалит объект уведомления, соответствующий указанному идентификатору, из очереди..
Далее мы создадим экземпляр уведомления, поместим его в очередь, а затем вызовем метод $Notice.processQueue для обработки очереди.
Что касается метода uuid, то метод uuid генерирует не действительно уникальный идентификатор, а идентификатор с низкой вероятностью повторения. Вероятность повторения, вероятно, находится в пределах 1 мс, более 1 на 100 миллионов. Это метод, который я нашел в stackoverflow, код выглядит следующим образом.
$Notice.processQueue
В методе processQueue мы сначала определяем, является ли очередь showQueueПолныйиз. Если нет, мы возьмем объект уведомления из головы очереди. Используйте метод $mount для создания DOM и добавления его к телу.
Поскольку стиль уведомления на странице — сверху вниз, мы рассчитаем смещение уведомления относительно верха, высоту каждого объекта уведомления и интервал 15 пикселей.
В то же время мы установим для свойства visible уведомления значение true, что запустит нашу анимацию перехода и поместит объект уведомления в очередь showQueue.
установлен жизненный цикл
Тогда мы посмотрим во внутренние компоненты уведомления, мы заметим, добавив до DOM. Мы будем играть в установленном таймере функции, таймер будет дождаться указанной продолжительности в миллисекундах, продолжительность указана уведомление о наличии нашего времени, если продолжительность 0, уведомление всегда будет там.
Через миллисекунды duration будет выполнен метод close внутри компонента уведомления.
close
В методе close мы добавим к текущему компонентуtransitionend,мероприятие. Это событие будет анимировано в css (Анимация вылета) срабатывает после окончания. Мы устанавливаем для параметра visible значение false, что вызовет анимацию ухода компонента. Затем мы вызываем метод onClose, который будет обрабатывать нашу очередь.
$Notice.remove
Прежде чем мы завернули onClose, вызов метода onClose вызовет наш метод $Notice.remove.
В методе $Notice.remove мы найдем объект уведомления, который нужно удалить по id, и удалим его из очереди showQueue.
Затем прокрутите оставшиеся очереди showQueue, перемещая их style.top вверх. Наконец, мы продолжаем вызывать метод $Notice.processQueue, извлекать новый объект уведомления из очереди очереди и помещать его в очередь showQueue.
destroy
Когда анимация выхода завершена, обратный вызов transitionend вызовет метод destroy.
destroy будет активно выгружать наш компонент и удалять наш элемент из DOM. На этом жизненный цикл объекта уведомления заканчивается.
$Notice.clear
$Notice.setLen
clear и setLen относительно просты, поэтому я не буду повторять их здесь.
следовать за
- «Компонент» проектирует компонент ввода
- «Компонент» Проектирование компонента сетки
- «Компоненты» для разработки компонента «Кнопка»
- «Компонент» проектирует компонент «Свернуть»
- «Компонент» Дизайн компонента «Значок»
- «Компонент» спроектировать компонент «Выбрать»
- «Компонент» проектирует компонент автозаполнения .....
Эта серия статей, постарайтесь сделать ее короткой и содержательной. Выделить компонент, таблицу, компонент DatePicker будет сложно.
Учебная статья React Hook может быть обновлена завтра. Потому что я записалась на открытые занятия по вечерам в выходные дни, чтобы познакомить с принципом Крюка. На следующей неделе я хочу перечитать исходный код preact и узнать, как реализовать хуки в preact.