Vue中有作用域的CSS
当< style>标签有scoped属性时,它的css只作用于当前组建中的元素。vue2和vue3均有此用法;
当使用scoped后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受父组件有作用域的css和子组件有作用域的css影响。
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
vue2和vue3均支持混合使用局部与全局样式
<style>
/*全局样式*/
.container-main{
background:'#fff';
}
</style>
<style scoped>
/* 当前组件/页面样式 */
.example {
color: red;
}
</style>
vue2深度作用选择器
css作用域官网参考
如果希望scoped样式能够作用得更深,能直接影响子组件,可以使用>>>操作符
<style scoped>
.a >>> .b { /* ... */ }
</style>
像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。
<style scoped>
.a >>> .b { /* ... */ }
</style>
注意:通过v-html创建DOM内容不受作用域内样式的影响;但是仍然可以通过深度作用选择器来为他们设置样式;
vue3深度作用选择器
CSS功能官网参考
在vue3中,如果希望scoped样式中的一个选择器能够作用的更深,例如影响子组件,可以使用:deep()这个伪类;
<template>
<div class="index-main">
<el-row>
<el-button type="success">按钮</el-button>
<el-button type="primary">按钮</el-button>
</el-row>
<el-row class="btn-bar" style="padding-top: 20px;">
<el-button type="success" size="small">按钮</el-button>
<el-button type="primary" size="small">按钮</el-button>
</el-row>
</div>
</template>
<style scoped>
/*.btn-bar 中的button都被加上了边框*/
.btn-bar :deep(.el-button){
border: 2px solid #f00;
}
/*
.btn-bar:deep(.el-button){
border: 2px solid #f00;
}
.btn-bar:deep() .el-button{
color: #f00;
}
*/
</style>
以上三种写法均可解析为下面的结果
/*解析结果*/
.btn-bar[data-v-b4e148ca] .el-button {
border: 2px solid #f00;
}
使用scss预处理器语言时,在类btn-bar中的所有标签均做深度样式调整时的写法:
<template>
<div class="index-main">
<el-row style="padding-top: 20px;" class="btn-bar">
<el-button type="success" size="small">按钮</el-button>
<el-button type="primary" size="small">按钮</el-button>
<el-link type="primary">主要链接</el-link>
</el-row>
</div>
</template>
<style lang="scss" scoped>
.btn-bar:deep(){
.el-button{
border: 2px solid #f00;
}
.el-link{
margin-left: 20px;
}
}
</style>
解析结果如下:
.btn-bar[data-v-b4e148ca] .el-button {
border: 2px solid #f00;
}
.btn-bar[data-v-b4e148ca] .el-link {
margin-left: 20px;
}
vue3插槽选择器
默认情况下,作用域样式不会影响到 < slot/> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标:
<style scoped>
:slotted(div) {
color: red;
}
</style>
vue3全局选择器
如果想让其中一个样式规则应用到全局,比起另外创建一个 < style>,可以使用 :global 伪类来实现 (看下面的代码):
<style scoped>
:global(.red) {
color: red;
}
</style>
CSS Modules
CSS Modules是一个用于模块化和组合 CSS 的流行系统。vue-loader 提供了与 CSS 模块的一流集成,可以作为模拟 CSS 作用域的替代方案。
css Modules的使用方法
//使用方式,在style上添加module属性
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
这将为 css-loader 打开 CSS Modules 模式,生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性,你可以在你的模块中使用动态 class 绑定:
<template>
<p :class="$style.red">
This should be red
</p>
</template>
由于它是一个计算属性,它也适用于 :class 的 object/array 语法:
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
JavaScript 中的访问(选项式API)
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>
自定义注入名称
<template>
<div style="background: #000; padding: 15px;">
<p :class="$style.yellow">黄色</p>
<p :class="classA.red">红色</p>
<p :class="classB.blue">蓝色</p>
</div>
</template>
<script>
export default {
data(){
return{
count: 1
}
},
mounted(){
console.log('mounted',this.$style);
console.log('mounted',this.classA);
}
}
</script>
<style module="classA">
.red{
color: #f00;
font-weight: 700;
}
</style>
<style module="classB">
.blue{
color: blue;
font-weight: 700;
}
</style>
组合式API中的使用
<script setup>
import { useCssModule } from 'vue';
console.log('moudle',useCssModule());
console.log('moudle classA',useCssModule('classA'));
</script>
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » vue中css作用域及深度作用选择器的用法
发表评论 取消回复