多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
使用 scoped 后,父组件的样式将不会渗透到子组件中。 例如1(无效): ~~~ <template> <div id="app"> <el-input class="text-box" v-model="text"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text: 'hello' }; } }; </script> <style lang="less" scoped> .text-box { input { width: 166px; text-align: center; } } </style> ~~~ 解决方法: 使用深度作用选择器 /deep/ ~~~ <template> <div id="app"> <el-input v-model="text" class="text-box"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text: 'hello' }; } }; </script> <style lang="less" scoped> .text-box { /deep/ input { width: 166px; text-align: center; } } </style> ~~~ 例子二: ~~~ <div v-show="currentTap[currentTap.length -1] == 'key'" class="item_div"> <el-form-item> <el-checkbox-group v-model="checkedKeys" @change="handleCheckedCitiesChange"> <el-checkbox label="添加该扩展域" name="type"></el-checkbox> <el-checkbox label="将该扩展域设置成关键的" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> </div> ~~~ 不生效 ~~~ .item_div .el-form-item__content { width: 500px; } ~~~ ![](https://img.kancloud.cn/5c/a0/5ca0c812a347859bb22efbd864e59eee_1037x422.png) 生效 ~~~ .item_div /deep/ .el-form-item__content { width: 500px; } ~~~ ![](https://img.kancloud.cn/74/39/7439383cf47582df31a25874b61a4561_992x374.png)