Commit 74f12e0b9f8f17ec45b65a13292953bb06afb682
1 parent
c53034a2
优化el-dialog
1.设置默认点击背景不关闭dialog(这个很容易误操作,体验较差) 2.el-dialog内容较多时,滚动条限定在内部而不撑开父页面的滚动条 3.代码生成的el-dialog默认添加 v-dialogDrag属性(可拖拽移动)
Showing
3 changed files
with
15 additions
and
1 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/index.vue.vm
| ... | ... | @@ -96,7 +96,7 @@ |
| 96 | 96 | @pagination="getList"/> |
| 97 | 97 | |
| 98 | 98 | <!-- 对话框(添加 / 修改) --> |
| 99 | - <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |
| 99 | + <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body> | |
| 100 | 100 | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| 101 | 101 | #foreach($column in $columns) |
| 102 | 102 | #if ($column.createOperation || $column.updateOperation) | ... | ... |
yudao-ui-admin/src/assets/styles/ruoyi.scss
| ... | ... | @@ -71,6 +71,16 @@ |
| 71 | 71 | padding: 10px 20px 0; |
| 72 | 72 | } |
| 73 | 73 | |
| 74 | +.el-dialog{ | |
| 75 | + display: flex; | |
| 76 | + flex-direction: column; | |
| 77 | + max-width: calc(100% - 30px); | |
| 78 | + max-height: calc(100% - 70px); | |
| 79 | + .el-dialog__body { | |
| 80 | + overflow: auto; | |
| 81 | + } | |
| 82 | +} | |
| 83 | + | |
| 74 | 84 | .el-table { |
| 75 | 85 | .el-table__header-wrapper, .el-table__fixed-header-wrapper { |
| 76 | 86 | th { | ... | ... |
yudao-ui-admin/src/main.js
| ... | ... | @@ -70,6 +70,10 @@ console.log(request) |
| 70 | 70 | Vue.prototype.$axios = request |
| 71 | 71 | import '@/styles/index.scss' |
| 72 | 72 | |
| 73 | +// 默认点击背景不关闭弹窗 | |
| 74 | +import ElementUI from 'element-ui' | |
| 75 | +ElementUI.Dialog.props.closeOnClickModal.default = false | |
| 76 | + | |
| 73 | 77 | /** |
| 74 | 78 | * If you don't want to use mock-server |
| 75 | 79 | * you want to use MockJs for mock api | ... | ... |