当style添加scoped时,表示组件私有化,可使组件模块化,其样式不会污染其他组件,也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了。
但这时需要引用公共组件时,无法改变公共组件样式,此时需要/deep/深度选择器,此时可以修改公共组件样式。
例如a-modal,如下:
基础a-modal如下图:
修改如下:
vue
<div class="box">
<a-modal v-model="visibles" :title="title" class="modal" :footer="null" :style="{marginTop: clientHeight < 800 ? videoOrAssess ? '-60px' : '50px' : videoOrAssess ? '10px' : '50px'}" :width="width" @ok="handleOk" @cancel="cancel">
<div style="height: 240px;width: 100%">
<a-form layout="horizontal" style="width: 100%">
<a-form-item label="审核结果:" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-bottom: 15px">
<a-radio-group v-model="examTypeOne">
<a-radio value="1">未发现疑似事件</a-radio>
<a-radio value="2">有疑似事件</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="备注:" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-bottom: 15px">
<a-textarea cols="30" rows="5" style="width:100%;" v-model="assess_txt"></a-textarea>
</a-form-item>
</a-form>
<div :style="{width: '100%',padding: '5px 5px',background: '#fff',textAlign: 'center',zIndex: 1,}">
<a-button :style="{ marginRight: '8px' }" type="primary" @click="handleOk">通过</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</a-modal>
<!-- 弹窗 编辑单个图例颜色 -->
</div>
<style lang="less" scoped>
.box{
/*/deep/ .ant-modal-content{
position: relative;
background-color: #00000000 !important;
border: 0;
border-radius: 4px;
background-clip: padding-box;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}*/
/deep/ .ant-modal-header{
background: #0c8cfa;
height: 32px;
padding: 5px 0;
.ant-modal-title{
text-align: center;
margin: 0 auto;
color: #fafafa;
}
}
/deep/ .ant-modal-close-x{
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/deep/ .ant-modal-body{
/*padding: 0 !important;*/
font-size: 0 !important;
line-height: 1 !important;
padding: 10px;
/* padding: 0px;
padding-left: 5px;*/
.turnback{
.imgt{
height: 0px;
}
}
.turnback:hover{
.imgt{
height: 20px;
}
}
.tabs{
tr{
.img1{
height: 0px;
}
}
tr:hover{
background: #E6F7FF;
.img1{
height: 20px;
}
}
}
}
}
</style>
如下图: