优化el-dialog
1.设置默认点击背景不关闭dialog(这个很容易误操作,体验较差) 2.el-dialog内容较多时,滚动条限定在内部而不撑开父页面的滚动条 3.代码生成的el-dialog默认添加 v-dialogDrag属性(可拖拽移动)
This commit is contained in:
parent
c53034a2dc
commit
74f12e0b9f
@ -96,7 +96,7 @@
|
||||
@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">
|
||||
#foreach($column in $columns)
|
||||
#if ($column.createOperation || $column.updateOperation)
|
||||
|
@ -71,6 +71,16 @@
|
||||
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__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
th {
|
||||
|
@ -70,6 +70,10 @@ console.log(request)
|
||||
Vue.prototype.$axios = request
|
||||
import '@/styles/index.scss'
|
||||
|
||||
// 默认点击背景不关闭弹窗
|
||||
import ElementUI from 'element-ui'
|
||||
ElementUI.Dialog.props.closeOnClickModal.default = false
|
||||
|
||||
/**
|
||||
* If you don't want to use mock-server
|
||||
* you want to use MockJs for mock api
|
||||
|
Loading…
Reference in New Issue
Block a user