el-drawer设置title的样式和背景等_el-drawer自定义title

el-drawer设置title的样式和背景等

1.原先的形式

2.采用插槽的形式

<div class = "container_drawer ">   
  <el-drawer
        ref="drawer"
        :before-close="handleBeforeClose"
        :destroy-on-close="true"
        :size="drawerWidth"
        :visible.sync="dialogVisible"
        :wrapperClosable="false"
        custom-class="demo-drawer"
        direction="rtl"
      >
        <template slot="title">
          <div class="custom_title">
            <el-image
              :src="require('@/views/xxxx/image/drawer.png')"
              style="width: 50px; height: 50px"></el-image>
            {{ kpiName }}
          </div>
        </template>
</el-drawer>
</div>
 
.container_drawer .custom_title {
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  display: flex;
  align-items: center;
 
}