优化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"/>
|
@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)
|
||||||
|
@ -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 {
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user