Parcourir la source

优化el-dialog
1.设置默认点击背景不关闭dialog(这个很容易误操作,体验较差)
2.el-dialog内容较多时,滚动条限定在内部而不撑开父页面的滚动条
3.代码生成的el-dialog默认添加 v-dialogDrag属性(可拖拽移动)

ycak47 il y a 2 ans
Parent
commit
74f12e0b9f

+ 1 - 1
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/index.vue.vm

@@ -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)

+ 10 - 0
yudao-ui-admin/src/assets/styles/ruoyi.scss

@@ -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 {

+ 4 - 0
yudao-ui-admin/src/main.js

@@ -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