求个国外在线网站,重庆排名seo公司,网站投票功能,湖南seo服务电话Vue中有作用域的CSS
当 style标签有scoped属性时#xff0c;它的css只作用于当前组建中的元素。vue2和vue3均有此用法#xff1b;
当使用scoped后#xff0c;父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受父组件有作用域的css和子组件有作用…Vue中有作用域的CSS
当 style标签有scoped属性时它的css只作用于当前组建中的元素。vue2和vue3均有此用法
当使用scoped后父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受父组件有作用域的css和子组件有作用域的css影响。
style scoped
.example {color: red;
}
/style
templatediv classexamplehi/div
/templatevue2和vue3均支持混合使用局部与全局样式
style
/*全局样式*/
.container-main{background:#fff;
}
/style
style scoped
/* 当前组件/页面样式 */
.example {color: red;
}
/stylevue2深度作用选择器
css作用域官网参考 如果希望scoped样式能够作用得更深能直接影响子组件可以使用操作符
style scoped
.a .b { /* ... */ }
/style像 Sass 之类的预处理器无法正确解析 。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 的别名同样可以正常工作。
style scoped
.a .b { /* ... */ }
/style注意通过v-html创建DOM内容不受作用域内样式的影响但是仍然可以通过深度作用选择器来为他们设置样式 vue3深度作用选择器
CSS功能官网参考 在vue3中如果希望scoped样式中的一个选择器能够作用的更深例如影响子组件可以使用:deep()这个伪类
template
div classindex-main
el-rowel-button typesuccess按钮/el-buttonel-button typeprimary按钮/el-button
/el-row
el-row classbtn-bar stylepadding-top: 20px;el-button typesuccess sizesmall按钮/el-buttonel-button typeprimary sizesmall按钮/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 classindex-main
el-row stylepadding-top: 20px; classbtn-barel-button typesuccess sizesmall按钮/el-buttonel-button typeprimary sizesmall按钮/el-buttonel-link typeprimary主要链接/el-link
/el-row
/div
/template
style langscss 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;
}
/stylevue3全局选择器
如果想让其中一个样式规则应用到全局比起另外创建一个 style可以使用 :global 伪类来实现 (看下面的代码)
style scoped
:global(.red) {color: red;
}
/styleCSS 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 绑定
templatep :class$style.redThis should be red/p
/template由于它是一个计算属性它也适用于 :class 的 object/array 语法
templatedivp :class{ [$style.red]: isRed }Am I red?/pp :class[$style.red, $style.bold]Red and bold/p/div
/templateJavaScript 中的访问选项式API
script
export default {created () {console.log(this.$style.red)}
}
/script自定义注入名称
template
div stylebackground: #000; padding: 15px;p :class$style.yellow黄色/pp :classclassA.red红色/pp :classclassB.blue蓝色/p
/div
/templatescriptexport default {data(){return{count: 1}},mounted(){console.log(mounted,this.$style);console.log(mounted,this.classA);}}
/scriptstyle moduleclassA.red{color: #f00;font-weight: 700;}
/style
style moduleclassB.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
