优化el-dialog

1.设置默认点击背景不关闭dialog(这个很容易误操作,体验较差)
2.el-dialog内容较多时,滚动条限定在内部而不撑开父页面的滚动条
3.代码生成的el-dialog默认添加 v-dialogDrag属性(可拖拽移动)
This commit is contained in:
ycak47 2022-08-16 17:07:07 +08:00
parent c53034a2dc
commit 74f12e0b9f
3 changed files with 15 additions and 1 deletions

View File

@ -96,7 +96,7 @@
@pagination="getList"/> @pagination="getList"/>
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
#foreach($column in $columns) #foreach($column in $columns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)

View File

@ -71,6 +71,16 @@
padding: 10px 20px 0; padding: 10px 20px 0;
} }
.el-dialog{
display: flex;
flex-direction: column;
max-width: calc(100% - 30px);
max-height: calc(100% - 70px);
.el-dialog__body {
overflow: auto;
}
}
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { th {

View File

@ -70,6 +70,10 @@ console.log(request)
Vue.prototype.$axios = request Vue.prototype.$axios = request
import '@/styles/index.scss' import '@/styles/index.scss'
// 默认点击背景不关闭弹窗
import ElementUI from 'element-ui'
ElementUI.Dialog.props.closeOnClickModal.default = false
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
* you want to use MockJs for mock api * you want to use MockJs for mock api