Parlons des nouvelles fonctionnalités du style Vue3 (résumé)-Voir.js-php.cn

Parlons des nouvelles fonctionnalités du style Vue3 (résumé)

青灯夜游

Libérer： 2022-05-12 21:23:26

avant

3271 Les gens l'ont consulté

Vue3 a amélioré le style. Cet article résumera et partagera avec vous les nouvelles fonctionnalités du style Vue3. J'espère qu'il sera utile à tout le monde !

Parlons des nouvelles fonctionnalités du style Vue3 (résumé)

La fonction de configuration introduite après Vue3.0 développe des composants Vue tout comme l'écriture de JS. De plus, le style ajoute également de nombreuses nouvelles fonctionnalités, telles que l'introduction de variables et de fonctions, rendant le CSS plus réutilisable...

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 temps, son CSS ne sera appliqué qu'aux éléments du composant courant : <style> 标签带有 scoped attribute 的时候，它的 CSS 只会应用到当前组件的元素上：

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

Copier après la connexion

二、深度选择器

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

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

Copier après la connexion

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

三、插槽选择器

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

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

Copier après la connexion

四、全局选择器

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

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

Copier après la connexion

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

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

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

Copier après la connexion

六、支持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>

Copier après la connexion

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

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

Copier après la connexion

七、与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>

Copier après la connexion

八、动态 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>

Copier après la connexion

🎜2. Sélecteur de profondeur 🎜🎜🎜🎜 Si vous souhaitez faire une sélection plus "profonde", c'est-à-dire affecter les sous-composants, vous pouvez utiliser le sélecteur dans le scoped style. Utilisez la pseudo-classe :deep() : 🎜rrreee

🎜Le contenu DOM créé via v-html ne sera pas affecté par les styles de portée, mais vous pouvez le faire. utilisez toujours le sélecteur de profondeur pour le styliser. 🎜