Статья №6 моей «1 статья в день до окончания карантина»
Итак, в части 1 этой статьи мы создали пользовательский интерфейс на основе выбранного нами дизайна dribble и использовали tailwindcss для его кодирования. Давайте добавим поведение и немного кода, чтобы заставить его работать.
Мы разделили наши поля ввода на отдельные компоненты и пытаемся получить их значение, нажав кнопку, которая находится за пределами этих компонентов, из-за чего нам нужна некоторая логика, чтобы слышать изменения этих компонентов в нашем родительском компоненте, то есть в нашем файле index.vue, ему нужно прислушиваться к изменениям, происходящим внутри gender.vue.
Vue позволяет вам прослушивать дочерние компоненты с помощью свойства emit. Итак, нам нужно испустить функцию в нашем дочернем компоненте и слушателя в нашем родительском компоненте.
На изображении выше у дочернего компонента есть кнопка, и мы хотим передать значение нашему родительскому компоненту, я добавлю настраиваемый прослушиватель событий в наш родительский компонент - <component @name-listenter="doSomethingWithName" /> дочерний компонент будет испускать функцию типа <button @click="$emit('name-listenter', 'Fayaz')">, имя- listener здесь является ключевым, и vue будет слушать его при каждой передаче.
Давайте сделаем то же самое с нашим файлом пол.
Вот как я это сделал.
Для компонента Height я буду использовать свойство watch vue, поскольку событие слайдера явно не запускает ручное событие при изменении значения, мы добавим прослушиватель наблюдения и выдадим значение там.
Точно так же добавьте события испускания для нашего компонента возраста и веса. Я добавил директиву длительного нажатия plugin к кнопкам веса и возраста, которые позволяют вам обновлять значение, когда вы удерживаете кнопки.
Расчет ИМТ.
Теперь, когда мы получили всю нашу ценность в нашем родительском компоненте. Для расчета ИМТ используется формула weight(kg)/height*height(m), и мы также выяснили, что возраст и пол не нужны для расчета ИМТ 😂.
Я бы посоветовал вам добавить какую-то проверку, прежде чем показывать результаты, например, обрабатывать отрицательные значения и прочее.
Давайте покажем ИМТ на странице результатов.
Есть несколько способов передать bmi следующему: мы могли бы использовать vuex и сохранить там значение, использовать localStorage или просто передать значение bmi в URL-адресе, потому что два других метода кажутся излишними. Приведенная ниже функция вычисляет ИМТ и передает значение в качестве параметра в URL-адресе и перенаправляет на страницу результатов.
Мы можем захватить bmi из URL-адреса, используя объект маршрута vue, например $route.query.bmi. Теперь у нас есть значение, все, что нам нужно сделать, это просто показать его на нашей странице результатов, это был дизайн со страницы дриблинга.
Еще есть классификация диапазонов ИМТ, которую я нашел в Википедии. Давайте воспользуемся этим.
Есть кнопка Пересчитать, позволяющая просто перенаправить их обратно на главную, а для кнопки Сохранить давайте заменим ее Поделиться Chrome Web Share API.
Вот код шаблона, который вы можете использовать для создания пользовательского интерфейса.
Страница окончательных результатов будет выглядеть так, я также добавил кнопку Webshare, которая показывает ваш ИМТ другим пользователям, но это работает только на телефонах.
Пока что мы разделили дизайн на компоненты, создали пользовательский интерфейс, добавили функциональность с помощью vue и передали значение на следующей странице.
На этом мы завершаем этот небольшой проект, надеюсь, вам понравился.
Вы можете найти живую рабочую демонстрацию здесь и полный проект на github здесь.
Дайте мне знать, если вам понадобится помощь с этим или если вы где-то застряли, делая это.
Не забудьте подписаться на меня в твиттере, а также здесь, чтобы получать больше статей и обновлений.
