【element-ui】el-dialog改变宽度

dialog默认宽度为父元素的50%,这就导致在移动端会非常的窄,如图1,需要限定宽度。

解决方法:添加custom-class属性,然后在style中编写样式,注意 ,如果有scoped限定,需要加::v-deep

html 复制代码
<el-dialog
    title="XXXX"
    :visible.sync="dialogVisible"
    custom-class="customWidth">
</el-dialog>

<style scoped lang="scss">
 ::v-deep .dialogwidth{
    min-width: 300px;
  }
</style>


相关推荐
雪碧聊技术5 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂2 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js