Vue3 css新特性 js控制css

最新推荐文章于 2024-05-31 19:22:14 发布

原来我是普通人

最新推荐文章于 2024-05-31 19:22:14 发布

阅读量286

点赞数 9

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_53432726/article/details/136327863

版权

1.插槽选择器

组件A里放一个插槽

<template>
    <div>
        我是插槽
        <slot></slot>
    </div>
</template>
 
<script>
export default {}
</script>
 
<style scoped>
 
</style>

在另一个组件引入A

<template>
    <div>
        <A>
            <div class="a">私人定制div</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.全局css选择器

最早使用style 不加scoped 或者写一个全局文件引入，现在可以使用另外的方法实现

老办法使用两个style标签

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

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

新办法

3.动态css

使用v-bind实现

<template>
    <div class="div">
       哈哈哈哈
    </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>

如果是对象需要加上引号

 <template>
    <div class="div">
        哈哈哈哈
    </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.css module

<template>
    <div :class="$style.red">
        哈哈哈哈
    </div>
</template>
 
<style module>
.red {
    color: red;
    font-size: 20px;
}
</style>

还可以给module起名相当于开启一个namespace

<template>
    <div :class="[zs.red,zs.border]">
        哈哈哈哈    </div>
</template>
 
<style module="zs">
.red {
    color: red;
    font-size: 20px;
}
.border{
    border: 1px solid #ccc;
}
</style>