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

相关文章
|
7月前
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
Element el-button 按钮组件详解
本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按钮分组 6. 按钮尺寸 7. 小结
2901 0
Element el-button 按钮组件详解
|
3月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令,然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽,并提供最大化后的回调函数。具体使用方法详见示例代码。
329 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
|
7月前
|
移动开发 小程序 JavaScript
uView Button 按钮
uView Button 按钮
120 2
|
7月前
|
JavaScript 前端开发
< elementUi组件封装: 通过 el-tag、el-popover、vue动画等实现公告轮播 >
在 Vue + elementUi 开发中,遇到这么一个需求,要实现公告轮播的效果。说实话,一开始是打算通过Javascript去获取并修改对应元素来控制轮播的,但是发现这样子代码比较多,而且性能不是很好。然后…聪明的小温想到了,能不能通过vue的动画过渡,实现公告的滚动效果呢!一不做二不休,直接上手,果然是可以实现的!接下来,简单阐述下,开发中使用方法!
188 0
|
7月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
202 0
|
7月前
|
前端开发
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
151 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
432 1
|
JavaScript
elementUI封装 el-dialog
elementUI封装 el-dialog
elementUI封装 el-dialog
|
JavaScript
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)