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

相关文章
|
Web App开发 安全
navigator.mediaDevices是undefined怎么办
navigator.mediaDevices是undefined怎么办
2549 1
element整理<el-calendar>日历组件-假期(整理)
element整理<el-calendar>日历组件-假期(整理)
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
1842 0
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3620 0
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!
|
存储 前端开发 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. 小结
8174 0
开发指南029-el-table-column对齐属性
按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式
|
JavaScript
Vue3数值动画(NumberAnimation)
该文档介绍了一个基于 Vue 的数值动画组件 `NumberAnimation`,提供了丰富的配置选项,如起始值、目标值、动画时长等,并支持自定义前缀、后缀及样式。通过简单的方法和事件,可以轻松控制动画的播放与停止。
697 0
Vue3数值动画(NumberAnimation)
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
4508 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)

热门文章

最新文章