/deep/ 深度选择器

当style添加scoped时,表示组件私有化,可使组件模块化,其样式不会污染其他组件,也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了。
但这时需要引用公共组件时,无法改变公共组件样式,此时需要/deep/深度选择器,此时可以修改公共组件样式。
例如a-modal,如下:
基础a-modal如下图:
/deep/ 深度选择器
修改如下:
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>

如下图:
/deep/ 深度选择器

上一篇:前端——》ant-design-vue组件的使用之四(DatePicker 日期选择框和Calendar日历的使用)


下一篇:spring boot 与 Ant Design of Vue 数据字典的布局和数据字典列表的实现(七)