Можливості CSS одно-файлових компонент
Область CSS
Якщо тег <style>
має атрибут scoped
, його CSS застосовуватиметься лише до елементів поточного компонента. Це схоже на інкапсуляцію стилю в Shadow DOM. Він поставляється з деякими застереженнями, але не вимагає жодних поліфілів. Це досягається за допомогою PostCSS для перетворення наступного:
vue
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
У наступне:
vue
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
Кореневі елементи дочірнього компонента
З scoped
стилі батьківського компонента не потраплять у дочірні компоненти. Однак на кореневий вузол дочірнього компонента впливатимуть CSS як батьківського, так і дочірнього CSS. Це призначено для того, щоб батьківський елемент міг стилізувати дочірній кореневий елемент для цілей макета.
Глибокі селектори
Якщо ви хочете, щоб селектор у стилях scoped
був «глибоким», тобто впливав на дочірні компоненти, ви можете використати псевдоклас :deep()
:
vue
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
Вищезазначене буде скомпільовано в:
css
.a[data-v-f3f3eg9] .b {
/* ... */
}
TIP
Стилі з обмеженою областю не впливають на вміст DOM, створений за допомогою v-html
, але його все одно можна стилізувати за допомогою глибоких селекторів.
Селектори слотів
За промовчанням стилі з обмеженою областю не впливають на вміст, відтворений <slot/>
, оскільки вони вважаються належними батьківському компоненту, який їх передає. Щоб явно націлити вміст слота, використовуйте псевдоклас :slotted
:
vue
<style scoped>
:slotted(div) {
color: red;
}
</style>
Глобальні селектори
Якщо ви хочете, щоб лише одне правило застосовувалося глобально, ви можете використовувати псевдоклас :global
замість створення іншого <style>
(див. нижче):
vue
<style scoped>
:global(.red) {
color: red;
}
</style>
Поєднання локальних та глобальних стилів
Ви також можете включити в той самий компонент як стилі з областю, так і без неї:
vue
<style>
/* глобальні стилі */
</style>
<style scoped>
/* локальні стилі */
</style>
Поради щодо використання стилів з обмеженою областю
Стилі з областю видимості не усувають потреби в класах. Через те, як браузери рендерять різні селектори CSS,
p { color: red }
буде працювати набагато повільніше при використанні scoped (тобто у поєднанні з селектором атрибутів). Якщо натомість ви використовуєте класи чи ідентифікатори, як-от у.example {color: red }
, то ви практично усуваєте цю втрату продуктивності.Будьте обережні з селекторами-нащадками в рекурсивних компонентах! Для правила CSS із селектором
.a .b
, якщо елемент, який відповідає.a
, містить рекурсивний дочірній компонент, тоді всі.b
у цьому дочірньому компоненті відповідатимуть правилу.
CSS Модулі
Тег <style module>
скомпільовано як модулі CSS і надає отримані класи CSS компоненту як об’єкт під ключем $style
:
vue
<template>
<p :class="$style.red">Це повинно бути червоним</p>
</template>
<style module>
.red {
color: red;
}
</style>
Отримані класи хешуються, щоб уникнути колізій, досягаючи такого ж ефекту, коли CSS охоплює лише поточний компонент.
Зверніться до специфікацій модулів CSS, щоб отримати додаткові відомості, наприклад глобальні винятки й композиція.
Впровадження користувацького імені
Можна налаштувати ключ властивості об'єкта з класами, що впроваджуються, вказавши значення атрибуту module
:
vue
<template>
<p :class="classes.red">червоний</p>
</template>
<style module="classes">
.red {
color: red;
}
</style>
Використання з композиційним API
Класи, що впроваджуються, доступні в setup()
і <script setup>
через API useCssModule
. Для секцій <style module>
з користувацьким іменем, useCssModule
приймає в якості першого аргументу відповідне значення атрибуту module
як перший аргумент:
js
import { useCssModule } from 'vue'
// всередині setup() scope...
// за промовчанням, повертає класи для <style module>
useCssModule()
// при вказівці імені, повертає класи для <style module="classes">
useCssModule('classes')
v-bind()
in CSS
Теги одно-файлового компонента <style>
підтримують зв'язування значень CSS зі станом динамічного компонента за допомогою функції CSS v-bind
:
vue
<template>
<div class="text">привіт</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
Синтаксис працює з <script setup>
і підтримує вирази JavaScript (має бути взято в лапки):
vue
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>привіт</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
Фактичне значення буде скомпільовано в хешовану спеціальну властивість CSS, тому CSS залишається статичним. Настроювана властивість буде застосована до кореневого елемента компонента за допомогою вбудованих стилів і негайно оновлена, якщо вихідне значення зміниться.