Quelles sont les nouvelles fonctionnalités du style Vue3 et comment les utiliser

Nouvelles fonctionnalités de style

La version Vue3.2 a apporté de nombreuses mises à niveau au style des composants à fichier unique, tels que les styles locaux, les variables CSS et les styles exposés aux modèles. (Partage vidéo d'apprentissage : tutoriel vidéo vue)

1. Style partiel

Lorsque la balise <style> a l'attribut scoped, son CSS uniquement le sera. appliqué aux éléments du composant courant : <style> 标签带有 scoped attribute 的时候，它的 CSS 只会应用到当前组件的元素上：

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

二、深度选择器

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。

三、插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：

<style scoped>
:slotted(div) {
  color: red;
}
</style>

四、全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现：

<style scoped>
:global(.red) {
  color: red;
}
</style>

五、混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式：

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

六、支持CSS Modules

<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类键暴露给组件：

1、 默认以$style 对象暴露给组件；

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

2、可以自定义注入module名称

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

七、与setup一同使用

注入的类可以通过 useCssModule API 在 setup() 和 <script setup> 中使用：

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

八、动态 CSS

单文件组件的 <style> 标签可以通过 v-bind

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

🎜 2. Sélecteur de profondeur 🎜🎜🎜 Si le sélecteur dans le style scoped veut faire une sélection plus "profonde", soit : influencer Pour atteindre sous-composants, vous pouvez utiliser la pseudo-classe :deep() : 🎜rrreee

🎜Le contenu DOM créé via v-html ne sera pas affecté par le style de portée Mais vous pouvez toujours le styliser à l'aide du sélecteur de profondeur. 🎜

🎜🎜3. Sélecteur d'emplacement 🎜🎜🎜Par défaut, les styles de portée n'affecteront pas le contenu rendu par <slot/> car ils sont considérés comme détenus et transmis par le composant parent. Utilisez la pseudo-classe :slotted pour cibler exactement le contenu de l'emplacement en tant que sélecteur : 🎜rrreee🎜🎜 4. Sélecteur global 🎜🎜🎜 Si vous souhaitez que l'une des règles de style s'applique globalement, alors en plus , créez un <style>, qui peut être implémenté en utilisant la pseudo-classe :global : 🎜rrreee🎜🎜5. Mélangez les styles locaux et globaux🎜🎜🎜Vous pouvez. également Le même composant contient à la fois des styles étendus et des styles non étendus : 🎜rrreee🎜🎜6 Prise en charge des modules CSS🎜🎜🎜Les balises <style module> seront compilées dans des modules CSS et des clés de classe CSS générées. sont exposés aux composants : 🎜🎜1. Par défaut, ils sont exposés aux composants en tant qu'objets $style ; 🎜rrreee🎜2 Vous pouvez personnaliser le nom du module à injecter🎜rrreee🎜🎜7. avec setup🎜🎜 🎜La classe injectée peut être utilisée dans setup() et <script setup> via l'API useCssModule : 🎜rrreee🎜🎜8. 🎜Composant de fichier unique La balise <style> peut associer des valeurs CSS​​aux états de composants dynamiques via la fonction CSS v-bind : 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!