css Style完整新特性
1.插槽选择器
A 组件定义一个插槽
<template>
<div>
我是插槽
<slot></slot>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
在App.vue 引入
<template>
<div>
<A>
<div class="a">盒子</div>
</A>
</div>
</template>
<script setup>
import A from "@/components/A.vue"
</script>
<style lang="less" scoped>
</style>
在A组件修改class a 的颜色
<style scoped>
.a{
color:red
}
</style>
无效果
默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。
解决方案 slotted
<style scoped>
:slotted(.a) {
color:red
}
</style>
2.全局选择器
在之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
<style>
div{
color:red
}
</style>
<style lang="less" scoped>
</style>
<style lang="less" scoped>
:global(div){
color:red
}
</style>
效果等同于上面
3.动态 CSS
单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：
<template>
<div class="div">
Hello World!!!
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const red = ref<string>('red')
</script>
<style lang="less" scoped>
.div{
color:v-bind(red)
}
</style>
如果是对象 v-bind 请加引号
<template>
<div class="div">
Yang
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
const red = ref({
color:'pink'
})
</script>
<style lang="less" scoped>
.div {
color: v-bind('red.color');
}
</style>
4.cssmodule
style module 标签会被编译为 CSS Modules 并且将生成的 CSS 类作为 $style 对象的键暴露给组件
<template>
<div :class="$style.red">
Hello World
</div>
</template>
<style module>
.red {
color: red;
font-size: 20px;
}
</style>
自定义注入名称（多个可以用数组）
你可以通过给 module attribute 一个值来自定义注入的类对象的 property 键
<template>
<div :class="[yang.red,yang.border]">
Hello World
</div>
</template>
<style module="yang">
.red {
color: red;
font-size: 20px;
}
.border{
border: 1px solid #ccc;
}
</style>
与组合式 API 一同使用
注入的类可以通过 useCssModule API 在 setup() 和
<template>
<div :class="[yang.red,yang.border]">
Yang
</div>
</template>
<script setup lang="ts">
import { useCssModule } from 'vue'
const css = useCssModule('yang')
</script>
<style module="yang">
.red {
color: red;
font-size: 20px;
}
.border{
border: 1px solid #ccc;
}
</style>
使用场景一般用于TSX 和 render 函数 居多
