【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>


相关推荐
Nayana1 分钟前
Clean Code JavaScript小记(一)
javascript
郭少3 分钟前
🔥 放弃 vw!我在官网大屏适配中踩了天坑,用 postcss-px-to-viewport-8-plugin 实现了 Rem 终极方案
vue.js·性能优化·nuxt.js
咸虾米4 分钟前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
vue.js·微信小程序
鹏多多14 分钟前
深入解析vue的transition过渡动画使用和优化
前端·javascript·vue.js
程序员小续26 分钟前
React 源码解读流程:从入口到渲染的全链路揭秘
前端·javascript·面试
江城开朗的豌豆29 分钟前
React key的隐藏技能:key改变时究竟发生了什么?
前端·javascript·react.js
江城开朗的豌豆1 小时前
玩转React Hooks
前端·javascript·react.js
前端小巷子1 小时前
Vue3 响应式革命
前端·vue.js·面试
杨荧2 小时前
基于Python的反诈知识科普平台 Python+Django+Vue.js
大数据·前端·vue.js·python·数据分析
zhoxier8 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui