Vue3+TypeScript学习笔记（三十）

Vue3的CSS支持一些神奇的新特性，有:slotted(选择器)插槽样式、:global()全局样式和CSS模块化。接下来将分别举例

1. :slotted()插槽样式

使用场景：子组件中定义了插槽，父组件来“填坑”的时候希望将样式设定在子组件中，但此时如果直接.类名Vue会认为我们在修改子组件中的样式，因此不起作用。遇到这种情况可以利用:slotted()将样式穿透到父组件中

App.vue

<template>
  <div>
    <A>
      <div class="a">私人订制div</div>
    </A>
  </div>
</template>

<script setup lang='ts'>
  import { ref,reactive } from 'vue'
  import A from './components/A.vue';
</script>

<style scoped>
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

A.vue

<template>
  <div>
    我是插槽
    <slot></slot>
    <!-- 引用CSS模块,如果没有写model="zs"则模块名默认为$style -->
    <div :class="[zs.border,zs.color,$style.font]">CSS模块化</div>
  </div>
</template>

<script setup lang='ts'>
  import { ref,reactive,useCssModule } from 'vue'
</script>

<style scoped>
/*  添加:slotted(),使子组件样式可以穿透至父组件  */
:slotted(.a) {
    background-color: red;
}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. 全局样式

使用场景：定义全局样式。在Vue2中我们可以再开一个不带scoped的style标签来定义，但Vue3建议我们使用:global(选择器)来定义

App.vue

<template>
    <div>
        <A>
            <div class="a">私人订制div</div>
        </A>
    </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import A from './components/A.vue';

let style = ref({
    color:'red',
})
setTimeout(()=>{
    style.value.color = 'blue'
},3000)
</script>

<style scoped>
:global(div){
    color: pink;
    /* 直接style.color编辑器会爆红,加上引号即可 */
    background-color: v-bind('style.color');
}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. CSS模块化

使用场景：改变css的引用方式并让css可以在脚本中被使用，方法是给style标签加上module="模块名"，如果没有模块名则模块名默认为$style。引用方式从原来的class="模块名"变为:class=模块名.样式名。如需引入多个样式可以将=号后面的内容封装成数组。需要注意的是模块化的css中的选择器必须是类选择器，否则不起作用

A.vue

<template>
    <div>
        我是插槽
        <slot></slot>
        <!-- 引用CSS模块,如果没有写model="zs"则模块名默认为$style -->
        <div :class="[zs.border,zs.color,$style.font]">CSS模块化</div>
    </div>
</template>

<script setup lang='ts'>
import { ref,reactive,useCssModule } from 'vue'

const css = useCssModule('zs')
// 输出zs模块对应的css
console.log(css)

const cssDefault = useCssModule('$style')
// 输出默认模块名对应的css
console.log(cssDefault)
</script>

<style module="zs" scoped>
/* 必须配置成类名的形式才可以解析成CSS模块 */
.border{
    position: relative;
    top: 100px;
    border: 3px solid #bfa;
}
.color{
    color: skyblue;
}
</style>

<!-- 没有模块名的案例 -->
<style module scoped>
.font{
    font-size: 20px;
}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

以上就是CSS所支持的所有新特性