Heim > Artikel > Web-Frontend > Was sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?
Vue3.2-Version hat viele Verbesserungen am Stil einzelner Dateikomponenten vorgenommen, wie z. B. lokale Stile, CSS-Variablen und Stile, die für Vorlagen verfügbar gemacht werden. (Lernvideo-Sharing: Vue-Video-Tutorial)
1. Teilweiser Stil
Wenn das c9ccee2e6ea535a969eb3f532ad9fe89
-Tag das Attribut scoped
hat, ist nur sein CSS vorhanden Auf die Elemente der aktuellen Komponente angewendet: c9ccee2e6ea535a969eb3f532ad9fe89
标签带有 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 内容不会被作用域样式影响,但你仍然可以使用深度选择器来设置其样式。
三、插槽选择器
默认情况下,作用域样式不会影响到 38b537b6886351ac721d89624ba185ca
渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。使用 :slotted
伪类以确切地将插槽内容作为选择器的目标:
<style scoped> :slotted(div) { color: red; } </style>
四、全局选择器
如果想让其中一个样式规则应用到全局,比起另外创建一个 c9ccee2e6ea535a969eb3f532ad9fe89
,可以使用 :global
伪类来实现:
<style scoped> :global(.red) { color: red; } </style>
五、混合使用局部与全局样式
你也可以在同一个组件中同时包含作用域样式和非作用域样式:
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
六、支持CSS Modules
a6167d77ee734aaef6dcd2aa69de7b33
标签会被编译为 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()
和 5101c0cdbdc49998c642c71f6b6410a8
中使用:
<script setup> import { useCssModule } from 'vue' // 默认, 返回 <style module> 中的类 const defaultStyle = useCssModule() // 命名, 返回 <style module="classes"> 中的类 const classesStyle = useCssModule('classes') </script>
八、动态 CSS
单文件组件的 c9ccee2e6ea535a969eb3f532ad9fe89
标签可以通过 v-bind
<script setup> const theme = { color: 'red' } </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>🎜 2. Tiefenselektor 🎜🎜🎜 Wenn der Selektor im
scoped
-Stil eine „tiefere“ Auswahl treffen möchte, heißt das: Einfluss erreichen Unterkomponenten können Sie die Pseudoklasse :deep()
verwenden: 🎜rrreee🎜Der über v-html
erstellte DOM-Inhalt wird vom Bereichsstil nicht beeinflusst . Sie können es aber trotzdem mit der Tiefenauswahl stylen. 🎜
🎜🎜3. Slot-Selektor🎜🎜🎜Standardmäßig wirken sich Bereichsstile nicht auf den von 38b537b6886351ac721d89624ba185ca
gerenderten Inhalt aus, da sie als gehalten und übergeben werden die übergeordnete Komponente. Verwenden Sie die Pseudoklasse :slotted
, um den Slot-Inhalt genau als Selektor auszuwählen: 🎜rrreee🎜🎜 Viertens, globaler Selektor 🎜🎜🎜 Wenn Sie möchten, dass eine der Stilregeln global angewendet wird, dann zusätzlich , erstellen Sie einen c9ccee2e6ea535a969eb3f532ad9fe89
, der mit der Pseudoklasse :global
implementiert werden kann: 🎜rrreee🎜🎜5. Mischen Sie lokale und globale Stile🎜🎜🎜Sie können Außerdem enthält dieselbe Komponente sowohl Stile mit Gültigkeitsbereich als auch Stile ohne Gültigkeitsbereich: 🎜rrreee🎜🎜6. Unterstützte CSS-Module🎜🎜🎜a6167d77ee734aaef6dcd2aa69de7b33
-Tags werden in CSS-Module kompiliert und CSS-Klassenschlüssel generiert sind für Komponenten verfügbar: 🎜🎜1. Standardmäßig werden sie für Komponenten als $style
-Objekte verfügbar gemacht. 🎜rrreee🎜rrreee🎜7 es mit setup🎜🎜 🎜Die injizierte Klasse kann in setup()
und 5101c0cdbdc49998c642c71f6b6410a8
über die useCssModule-API verwendet werden: 🎜rrreee🎜🎜8 🎜Einzelne Dateikomponente Das c9ccee2e6ea535a969eb3f532ad9fe89
-Tag kann CSS-Werte dynamischen Komponentenzuständen über die CSS-Funktion v-bind
zuordnen: 🎜rrreeeDas obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!