css Style、动态样式

插槽选择器 - slotted

// A.vue组件中 - 插槽
// 在A组件中修改class a 的颜色
<template>
    <div>
        我是插槽
        <slot></slot>
    </div>
</template>
 
<script>
export default {}
</script>
 
<style scoped>
 :slotted(.a){
     color: red;
 }
</style>

// 父组件中传入作用域插槽
<template>
    <div>
        <A>
            <div class="a">私人定制div</div>
        </A>
    </div>
</template>

全局选择器 - global

第一种：新建一个<style>标签，不添加scoped

<style>
 div{
     color:red
 }
</style>
 
<style lang="less" scoped>
 
</style>

第二种：global

<style lang="less" scoped>
    :global(.a){
        color: red;
    }
</style>

动态CSS

单文件组件的style标签可以通过v-bind (css函数)将css值关联到动态的组件状态上

字符串

<template>
    <div class="css-style">css-style</div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    const color-red = ref<string>("red");
</script>

<style lang="less" scoped>
    .css-style{
        color: v-bind(color-red);
    }
</style>

对象 - 使用引号

<template>
    <div class="css-style">css-style</div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    const obj= ref({
        color: "red"
    })
</script>

<style lang="less" scoped>
    .css-style{
        color: v-bind('obj.color');
    }
</style>

css module

<style module>标签会被编译为CSS Modules，并且将生成的CSS类作为$style对象的键暴露给组件，$style是默认名。

<template>
    <div :class="$style.red">$style.red</div>
</template>

<style module>
    .red{
        color: red;
        // font-size: 20px;
    }
</style>

自定义注入名称，多个可以使用数组

<template>
    <div :class="[zxx.red, zxx.border]">$style.red</div>
</template>

<style module="zxx">
    .red{
        color: red;
        // font-size: 20px;
    }
    .border{
        border: 1px solid #000;
    }
</style>

与组合式API一起使用

注入的类通过useCssModuleAPI在setup()和<script setup>中使用，对于自定义注入名称的css module模块，在useCssModule中传递对应的module attribute值作为参数。

使用场景：一般在jsx、tsx和render函数中使用居多。

<template>
    <div :class="[zxx.red, zxx.border]">$style.red</div>
</template>

<script setup>
    import { useCssModule } from 'vue';
    const css = useCssModule('zxx');
</script>

<style module="zxx">
    .red{
        color: red;
        // font-size: 20px;
    }
    .border{
        border: 1px solid #000;
    }
</style>