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

相关文章
|
2月前
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
118 0
|
9月前
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
518 0
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2431 0
Element el-button 按钮组件详解
|
17天前
|
JavaScript 前端开发
< elementUi组件封装: 通过 el-tag、el-popover、vue动画等实现公告轮播 >
在 Vue + elementUi 开发中,遇到这么一个需求,要实现公告轮播的效果。说实话,一开始是打算通过Javascript去获取并修改对应元素来控制轮播的,但是发现这样子代码比较多,而且性能不是很好。然后…聪明的小温想到了,能不能通过vue的动画过渡,实现公告的滚动效果呢!一不做二不休,直接上手,果然是可以实现的!接下来,简单阐述下,开发中使用方法!
|
1月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
15 0
|
4月前
|
前端开发
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
58 0
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
|
8月前
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
108 1
|
8月前
|
JavaScript
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
|
9月前
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
227 0