Vue3 스타일의 새로운 기능에 대해 이야기해보겠습니다(요약)-View.js-php.cn

Vue3 스타일의 새로운 기능에 대해 이야기해보겠습니다(요약)

青灯夜游

풀어 주다： 2022-05-12 21:23:26

앞으로

3267명이 탐색했습니다.

Vue3가 스타일을 업그레이드했습니다. 이 글은 Vue3 스타일의 새로운 기능을 요약하고 공유하겠습니다. 모두에게 도움이 되기를 바랍니다.

Vue3 스타일의 새로운 기능에 대해 이야기해보겠습니다(요약)

Vue3.0 이후에 도입된 설정 기능은 JS 작성과 마찬가지로 Vue 구성 요소를 개발합니다. 또한 스타일에는 변수 및 함수 도입과 같은 많은 새로운 기능이 추가되어 CSS를 더 쉽게 사용할 수 있습니다...

새로운 스타일 기능

Vue3.2 버전에서는 로컬 스타일, CSS 변수, 템플릿에 노출되는 스타일 등 단일 파일 구성 요소의 스타일이 많이 업그레이드되었습니다. (학습 영상 공유: vue 영상 튜토리얼)

1. 부분 스타일

<style> 태그에 scoped 속성이 있는 경우 시간이 지나면 CSS는 현재 구성 요소의 요소에만 적용됩니다: <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. 깊이 선택기 🎜🎜🎜🎜scoped 스타일의 선택기에 대해 더 "깊은" 선택을 만들고 싶다면, 즉 하위 구성 요소에 영향을 미치려면, :deep() 의사 클래스를 사용할 수 있습니다. 🎜rrreee