Skip to content

Commit f99acdd

Browse files
belk1ngbelk1ng
committed
Merge remote-tracking branch 'upstream/master'
2 parents 3732352 + 433681b commit f99acdd

File tree

8 files changed

+772
-0
lines changed

8 files changed

+772
-0
lines changed

‎04-sfc/20-MeetupCover-style-v-bind/App.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup>
2+
import { computed, ref } from 'vue'
3+
import { UiRadioGroup } from '@shgk/vue-course-ui'
4+
import MeetupCover from './MeetupCover.vue'
5+
import meetups from './meetups.fixture.ts'
6+
7+
const meetupIndex = ref(0)
8+
const meetup = computed(() => meetups[meetupIndex.value])
9+
const options = meetups.map((_, index) => ({ label: index + 1, value: index }))
10+
</script>
11+
12+
<template>
13+
<div style="display: flex; justify-content: center; gap: 1em; padding: 1em 0">
14+
<UiRadioGroup v-model="meetupIndex" :options="options" />
15+
</div>
16+
<div class="page-meetup">
17+
<MeetupCover :title="meetup.title" :image="meetup.image" />
18+
</div>
19+
</template>

‎04-sfc/20-MeetupCover-style-v-bind/MeetupCover.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
4+
const props = defineProps({
5+
title: {
6+
type: String,
7+
},
8+
9+
image: {
10+
type: String,
11+
},
12+
})
13+
14+
const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
15+
</script>
16+
17+
<template>
18+
<div class="meetup-cover" :style="bgStyle">
19+
<h1 class="meetup-cover__title">{{ title }}</h1>
20+
</div>
21+
</template>
22+
23+
<style scoped>
24+
.meetup-cover {
25+
background-size: cover;
26+
background-position: center;
27+
/* Если изображение присутствует - берём его из CSS переменной, установленной на элемент в шаблоне */
28+
/* Иначе выводим изображение по умолчанию - var(--default-cover) */
29+
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-url, var(--default-cover));
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
justify-content: center;
34+
height: 410px;
35+
max-width: 1216px;
36+
margin: 0 auto;
37+
}
38+
39+
.meetup-cover__title {
40+
color: var(--white);
41+
font-family: Roboto, sans-serif;
42+
font-weight: 700;
43+
font-size: 36px;
44+
line-height: 48px;
45+
padding: 0 16px;
46+
text-align: center;
47+
}
48+
49+
@media all and (min-width: 992px) {
50+
.meetup-cover__title {
51+
font-size: 72px;
52+
line-height: 84px;
53+
}
54+
}
55+
</style>

‎04-sfc/20-MeetupCover-style-v-bind/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# MeetupCover с v-bind в CSS
2+
3+
👷🏻 _Задача нормальной сложности_\
4+
💼 _Часть проекта_
5+
6+
<!--start_statement-->
7+
8+
Дана реализация компонента `MeetupCover` из предыдущего задания. В компоненте из параметров устанавливается фон в
9+
стилях.
10+
11+
В текущем решении используется старый подход, когда в компоненте вычисляется CSS переменная со значением, которое
12+
используется в стилях. В современном SFC начиная с Vue 3.2 мы можем напрямую привязывать свойства компонента в стилях с
13+
помощью `v-bind`.
14+
15+
Требуется изменить реализацию компонента `MeetupCover` так, чтобы фон задавался через `v-bind` в стилях, а не
16+
вычислялись и привязывались вручную стили с CSS переменной.
17+
18+
Документация: [https://vuejs.org/api/sfc-css-features.html#v-bind-in-css](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css)
19+
20+
### Результат
21+
22+
<img src="https://i.imgur.com/R3qP00L.png" alt="Пример" style="max-width: 100%" />
23+
24+
<!--end_statement-->
25+
26+
---
27+
28+
## Инструкция
29+
30+
📝 Для решения задачи отредактируйте файл: `MeetupCover.vue`.
31+
32+
🚀 Команда запуска для ручного тестирования: `npm run dev`\
33+
Приложение будет доступно на [http://localhost:5173/04-sfc/20-MeetupCover-style-v-bind/](http://localhost:5173/04-sfc/20-MeetupCover-style-v-bind/).
34+
35+
✅ Доступно автоматическое тестирование: `npm test MeetupCover-style-v-bind`

‎04-sfc/20-MeetupCover-style-v-bind/__tests__/MeetupCover-style-v-bind.test.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { describe, it, expect } from 'vitest'
2+
import fs from 'node:fs/promises'
3+
import MeetupCover from '@/MeetupCover.vue'
4+
5+
describe('sfc/MeetupCover-style-v-bind', () => {
6+
it('реализован через v-bind в CSS', async () => {
7+
const solutionText = await fs.readFile(MeetupCover.__file, 'utf8')
8+
expect(solutionText).toMatch(/<style.*>.*v-bind.*<\/style>/ms)
9+
})
10+
})

‎04-sfc/20-MeetupCover-style-v-bind/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>MeetupCover с v-bind в CSS</title>
6+
</head>
7+
<body>
8+
<div class="wrapper">
9+
<div id="app"></div>
10+
</div>
11+
<script type="module" src="./main.js"></script>
12+
</body>
13+
</html>

‎04-sfc/20-MeetupCover-style-v-bind/main.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import '@shgk/vue-course-ui/style.css'
2+
import { createApp } from 'vue'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

0 commit comments

Comments
 (0)