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
赞(31)
打赏
下一篇：Vite+Ts项目找不到模块“xxx”或其相应的类型声明
共 0 条评论关于"vue3 :deep() :slotted() :global() :v-bind、css动态绑定变量"
最新评论