唯品秀前端博客

scoped 原理:vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过 PostCSS 转译实现的),达到样式私有化模块化的目的。项目开发中因为ui设计常常需要修改vue常用的组件库(element,antD等等), 这就需要用到样式穿透

样式穿透:deep()

1
2
3
4
5
<style scoped>
 :deep(.box) {
    color:blue
}
</style>

修改插槽过来的组件的样式slotted()

1
2
3
4
5
<style scoped>
 :slotted(.box) {
    color:blue
}
</style>

全局样式

在之前我们想加入全局样式通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案

1
2
3
4
5
<style lang="less" scoped>
:global(.box){
    color:red
}
</style>

动态css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <p>动态css绑定</p>
</template>

<script setup lang="ts">
import { ref } from "vue"
const theme = ref("red")

const colors = ["blue", "yellow", "red", "green"]

setInterval(() => {
  theme.value = colors[Math.floor(Math.random() * 4)]
}, 1000)

</script>

<style scoped>
/* 修改以下代码绑定动态颜色 */
p {
  color: v-bind('theme')
}
</style>

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"vue3 :deep() :slotted() :global() :v-bind、css动态绑定变量"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏