Vue3新增加的css语法糖

一、deep
复制代码
<template>
    <div class="">
        <el-input /> 
    </div>
</template>
<style scoped>
/* 样式穿透 */
:deep input {
    background: red;
}
</style>
二、slotted

子组件修改插槽里面的样式

复制代码
<template>
    <div class="">
        <child>
            <div></div>
        </child>
    </div>
</template>

<style scoped>
/* 修改插槽样式 */
:slotted(div) {
    background: red;
}
</style>
三、global

scoped里面依然可以写全局样式

复制代码
<template>
    <div class="">

    </div>
</template>
<style scoped>
/* 全局样式 */
:global(div) {
    background: red;
}
</style>
四、v-bind
复制代码
<template>
    <div class="">

    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const bag = ref<string>('red')
</script>
<style scoped>
/* 动态样式*/
div {
    background: v-bind(bag)
}
</style>
五、module
复制代码
<!-- 将生成的 CSS 类作为 $style 对象的键暴露给组件 -->
<template>
    <div :class="$style.title"></div> 
</template>

<style module>
.title {
    color: red;
}
</style>

<!-- 将生成的 CSS 类作为 jx 对象的键暴露给组件-->
<template>
   <div :class="jx.title"></div> 
</template>
<style module="jx">
.title {
    color: red;
}
</style>

可以通过获取

复制代码
<script setup lang="ts">
import { useCssModule } from "vue"
const jx = useCssModule('jx')
console.log(jx.title);
const user = `<div class="${jx.title}">12313</div>`
</script>
<style module="jx">
.title {
    color: red;
}
</style>
相关推荐
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
随风飞翔的胖子1 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
幻灵尔依2 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子2 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳2 小时前
CSS 基础概念
前端·css·css3
前端小巷子2 小时前
JS 实现图片瀑布流布局
前端·javascript·面试
杜蒙2 小时前
React Hooks 详解
前端·javascript
小菜全3 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku3 小时前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试
zheshiyangyang3 小时前
TypeScript学习【一】
javascript·学习·typescript