Что такое элемент обратного отсчета
Элемент обратный отсчет используется для отображения оставшегося времени для рекламной акции и отправляет уведомление, когда это время заканчивается. Этот элемент поддерживает:
- Установка времени по дням, часам, минутам и секундам
- Настройка стилей текста, границ и разделителей
- Временная задержка
- Событие обратного вызова для окончания обратного отсчета
Как показано на следующем рисунке, макет элемента состоит из чисел и разделителей. Как правило, числа указывают оставшееся время по дням, часам, минутам и секундам. Разделители используются для разделения чисел. Общими разделителями могут быть слова (день, час, минута и секунда) и двоеточие (:).
Этапы реализации
Настройка подэлементов
Пользовательский интерфейс обратного отсчета может использоваться повсеместно, в то время как макет его содержимого может различаться и, следовательно, не может быть жестко запрограммирован. В противном случае после изменения какой-либо части пользовательского интерфейса контента подэлементы также должны быть изменены, что нарушает принцип программирования с открытым исходным кодом.
Поэтому в countdown.ux поддерживаются несколько атрибутов стиля, чтобы вы могли настроить стиль подэлементов.
Проектирование атрибутов и поддерживаемых событий подэлементов
Разработка общего макета
- Элемент text используется для разработки макета разделителей и чисел, как показано на рисунке 1 ниже.
- Определите связанные атрибуты в props подэлементов и передайте значения, когда родительский элемент ссылается на подэлементы. Вызовите this.$watch(‘day’, ‘changeFlag’), чтобы прослушать изменения значений, а затем обновить и обработать значения в подэлементах, как показано на рисунке 2 ниже.
- Реализуйте алгоритм обратного отсчета. Вам необходимо преобразовать дни, часы и минуты в секунды, настроить таймер на уменьшение на 1 каждую секунду и преобразовать секунды обратно в дни, часы, минуты и секунды соответственно, как показано на рисунках 3 и 4 ниже.
- Определите событие обратного вызова timeup в родительском элементе, а затем реализуйте и привяжите событие, как показано на рис. 5.
- Запустите событие timeup родительского элемента в подэлементах, как показано на рис. 6.
Краткое содержание
В этом уроке вы узнали, как:
- Подэлементы дизайна, включая их атрибуты и поддерживаемые события.
- Реализовать обмен данными между родительским элементом и подэлементами.
- Преобразуйте дни, часы, минуты и секунды и установите таймер.
- Настройте стиль элемента.
