huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-29 18:51:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化el-dialog

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/index.vue.vm
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)

10
yudao-ui-admin/src/assets/styles/ruoyi.scss
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 {

4
yudao-ui-admin/src/main.js
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