решение задач из блока components #9
Conversation
|
Проверьте, пожалуйста, ваше решение, не все тесты прошли (PR не будет принят до тех пор, пока все добавленные задачи не будут решены). |
|
Добавляю преподавателя (@ShGKme) для код-ревью. |
|
Решение было обновлено, посмотрим что скажет @ShGKme |
|
Решение было обновлено, посмотрим что скажет @ShGKme |
| import { defineComponent } from 'vue' | ||
|
|
||
| export default defineComponent({ | ||
| name: 'UiTitle.js', |
There was a problem hiding this comment.
Расширения файла не должно быть в имени. Имя - просто UiTitle
There was a problem hiding this comment.
передача слота исправлена, + добавилась 1 задача - UiStretch
| export default defineComponent({ | ||
| name: 'WeatherCardList', | ||
|
|
||
| components: { | ||
| WeatherCard, | ||
| }, | ||
|
|
||
| template: ` | ||
| <ul class="weather-list unstyled-list"> | ||
| <WeatherCard /> | ||
| </ul> | ||
| `, | ||
| }) |
There was a problem hiding this comment.
Это компонент называется WeatherCardList (список карточек). Но выводит всего одну карточку.
| export default defineComponent({ | ||
| name: 'WeatherCard', | ||
|
|
||
| setup() { | ||
| const weatherData = getWeatherData(); | ||
| console.log(weatherData); | ||
| console.log(WeatherConditionIcons); | ||
|
|
||
| function checkWeatherCondition(key, obj) { | ||
| let result; | ||
| if (obj.hasOwnProperty(key)) { | ||
| result = obj[key]; | ||
| } else { | ||
| result = ''; | ||
| } | ||
| return result; | ||
| } | ||
|
|
||
| return { | ||
| weatherData, | ||
| WeatherConditionIcons, | ||
| checkWeatherCondition, | ||
| } | ||
| }, | ||
|
|
||
| template: ` | ||
| <li v-for="(weather, index) in weatherData" :key="index" class="weather-card" | ||
| :class="{'weather-card--night' : weather.current.dt < '07:00' }"> |
There was a problem hiding this comment.
А этот компонент напротив - называется "карточка", но выводит список карточек по конкретным данным из сервиса.
| props: { | ||
| text: { | ||
| type: String, | ||
| }, | ||
| }, | ||
|
|
||
| template: ` | ||
| <slot>{{ text }}</slot> | ||
| `, |
There was a problem hiding this comment.
Этот компонент ничего не делает. Он просто рендерит своё содержимое, как есть, либо переданный текст.
То есть
<UiTitle>
<any />
<thing />
</UiTitle>
<UiTitle :text="someText" />не отличается от
<any />
<thing />
{{ someText }}| <UiAlert | ||
| v-if="!meetup.agenda || !meetup.agenda.length"> | ||
| <slot>Программа пока пуста...</slot> | ||
| </UiAlert> |
There was a problem hiding this comment.
<slot> здесь использован некорректно.
Специальный тег <slot> используется для создания слота в текущем компоненте - места, содержимое которого будет определять родительский компонент.
В компонент <meetupView> не передают содержимое. И если бы передавали - странно если единственное передаваемое содержимое - это контент алерта об отсутствии программы.
Для передачи содержимого В <UiAlert> специальные теги не нужны, так как это содержимое слота по умолчанию.
В полной форме для передачи слота используется элемент <template> с директивой v-slot:slotName
<UiAlert
v-if="!meetup.agenda || !meetup.agenda.length">
<template #default>Программа пока пуста...</template>
</UiAlert>| @@ -26,7 +24,8 @@ const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image} | |||
| background-position: center; | |||
| /* Если изображение присутствует - берём его из CSS переменной, установленной на элемент в шаблоне */ | |||
| /* Иначе выводим изображение по умолчанию - var(--default-cover) */ | |||
| background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-url, var(--default-cover)); | |||
| background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), | |||
| v-bind('props.image ? `var(--bg-url, url(' ${props.image}')` : `var(--default-cover)`'); | |||
There was a problem hiding this comment.
Такое решение работает, но сгенерируется очень длинное и сложное имя CSS переменной, содержащее всё это выражение с экранированием спец символов.
Лучше такие выражения выносить в computed
|
Проверьте, пожалуйста, ваше решение, не все тесты прошли (PR не будет принят до тех пор, пока все добавленные задачи не будут решены). |
|
Добавляю преподавателя (@ShGKme) для код-ревью. |
| <UiAlert | ||
| v-if="!meetup.agenda || !meetup.agenda.length"> | ||
| <template #default>Программа пока пуста...</template> | ||
| </UiAlert> |
There was a problem hiding this comment.
Напомню, что слот по умолчанию (default) можно передавать просто между тегами компонента
<UiAlert
v-if="!meetup.agenda || !meetup.agenda.length">
<template #default>Программа пока пуста...</template>
</UiAlert>
No description provided.