自定义element-ui Popover样式

首下看下官方的样式

然后看自定义的效果

最后上实现代码

<el-popover
              v-model="isVisible"
              placement="top"
              width="400"
              popper-class="my-popover-box"
            >
              <div class="popover-content-box">
                <div class="title-box">
                  <span>我是标题</span>
                  <i class="el-icon-close" @click="isVisible=false" />
                </div>
                <div>我是文字</div>
                <div class="btn-box">
                  <el-button class="btn" type="primary" size="mini">按钮</el-button>
                </div>
                <div>我是文字</div>
                <div>我是文字</div>
                <el-upload
                  class="upload-demo btn-box"
                  :http-request="uploadTpl"
                  action=""
                  :on-change="uploadChange"
                  :on-remove="uploadRemove"
                  :auto-upload="false"
                  :file-list="fileList"
                  accept=".png,.jpg"
                >
                  <el-button class="btn" size="mini" type="primary">按钮</el-button>
                </el-upload>
                <div class="tips">注意：温馨小提示</div>
              </div>
              <el-button slot="reference" type="primary" style="margin: 0 10px">点我<i class="el-icon-upload el-icon--right" /></el-button>
            </el-popover>
            
            
  <style lang="scss">
.my-popover-box{
  .popover-content-box{
    display: flex;
    flex-direction: column;
    .title-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .btn-box{
      align-self: center;
    }
  }
}
</style>