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

相关文章
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
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
5262 1
|
存储 资源调度
在 Pinia 中如何实现状态持久化?
在 Pinia 中如何实现状态持久化?
3518 57
|
存储 前端开发 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. 小结
8565 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28697 154
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
开发指南029-el-table-column对齐属性
按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式
|
存储 前端开发 Java
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10171 10
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
1620 0

热门文章

最新文章