饿了么el-dialog自定义内容以及el-dialog自定义样式

自定义内容采用插槽

 <el-dialog :visible.sync="deleteVisible" width="388px" append-to-body
       @close='deleteVisible=false' custom-class="delete" style="margin-top: 20vh;border-radius:8px;"
       :close-on-click-modal='false'>
       <div class="deleteTip" slot="title" style="font-size:16px;display:flex;align-items:center;">
         <span class="el-icon-warning"
           style="color:#ff9f1f;font-size:26px;margin-right:10px;"></span>
         你确定要删除未命名表单吗?
       </div>
       <div class="" style="color:#747677;">
         删除表单，将同时删除表单产生的数据、页面设置和权限配置等，且无法还原，如表单被其他表单关联，关联表单一并会受到影响，请谨慎操作</div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="deleteVisible = false">取 消</el-button>
         <el-button type="primary" @click="deleteVisible = false">确 定</el-button>
       </span>
     </el-dialog>

其中,自定义样式的代码为:

 custom-class="delete"

然后在css中(根级):

 ::v-deep .el-dialog.delete {
   border-radius: 8px !important;
 }