Vue3 Css新特性

Vue

Vue3 Css新特性

样式穿透

使用:deep()在css中可以实现样式穿透, 修改第三方组件的样式

:deep(input){
    background:red;
}

插槽选择器

使用:slotted()可以修改插槽内部的样式

<template>
    <div>
        我是插槽
        <slot></slot>
    </div>
</template>

<style scoped>
/* 插槽选择器 */
:slotted(.a){
    color: red;
}
</style>

全局选择器

使用:global()可以改变全局的css样式

:global(div){
    color: forestgreen;
}

动态css绑定数据

使用v-bind可以绑定ref变量

<script setup lang="ts">
import { ref } from 'vue';
const color =ref('pink')
setTimeout(() => {
    color.value = 'blue'
}, 1000);
</script>

<style scoped>
.text{
    color:v-bind(color)
}
</style>

Css module

<template>
        <div :class="[$style.text]">我是插槽</div>
</template>

<style module scoped> 
.text {
    color: pink;
}
</style>

  • 自定义module名称

    <template>
    <div :class="[alger.text]">我是插槽</div>
</template>
<style module="alger" scoped> 
.text {
    color: pink;
}
</style>

  • useCssModule

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

const css = useCssModule('alger')
console.log('css', css)
</script>

<style module="alger" scoped> 
.text {
    color: pink;
}
</style>