【Vue3】CSS 新特性

:slotted

<template>
<!--  App.vue-->
  <Son >
    <div class="a">
      我要插入了
    </div>
  </Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<style>

</style>

<template>
<!--  Son.vue-->
  插槽：
  <slot></slot>
</template>

<script setup lang="ts">

</script>
<style scoped>
:slotted(.a) {
  color: cadetblue;
}
</style>

:global

<template>
<!--  App.vue-->
  <Son >
    <div class="a">
      我要插入了
    </div>
  </Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<style scoped>
:global(div) {
  color: aqua;
}
</style>

v-bind

<template>
<!--  App.vue-->
  <div class="c1">动态css1</div>
  <div class="c2">动态css2</div>
</template>

<script setup lang="ts">
import {ref} from "vue";
const style1 = ref('lightblue')
const style2 = ref({
  color: 'lightgreen'
})
</script>

<style scoped>
.c1 {
  color: v-bind('style1')
}
.c2 {
  color: v-bind('style2.color')
}
</style>

module

<template>
  <!--  App.vue-->
  <div :class="heo.c1">动态css1</div>
  <div :class="[heo.c2, heo.c1]">动态css2</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

</script>

<style module="heo">
.c1 {
  color: lightblue
}

.c2 {
  border: 1px solid black;
}
</style>

如果 module 没有指定名字<style module>，则默认使用:class="$style.c1"。

此外，他还有自定义hook useCssModule。

:deep

:deep() 和 样式穿透

原文地址：https://blog.csdn.net/XiugongHao/article/details/136410603

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！