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

简介: 饿了么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;
 }

相关文章
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
2591 0
element整理<el-calendar>日历组件-假期(整理)
element整理<el-calendar>日历组件-假期(整理)
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3769 0
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
5237 1
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
8495 0
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
开发指南029-el-table-column对齐属性
按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式
|
JSON 小程序 数据格式
微信小程序动态修改页面标题title
微信小程序动态修改页面标题title
2456 0
微信小程序动态修改页面标题title
|
JavaScript
Vue3数值动画(NumberAnimation)
该文档介绍了一个基于 Vue 的数值动画组件 `NumberAnimation`,提供了丰富的配置选项,如起始值、目标值、动画时长等,并支持自定义前缀、后缀及样式。通过简单的方法和事件,可以轻松控制动画的播放与停止。
825 0
Vue3数值动画(NumberAnimation)
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10107 10