feat: 修复问题，删除grid布局

JackySoft · Aug 19, 2023 · 371af74 · 371af74
1 parent 420324a
commit 371af74
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 256 deletions.
diff --git a/docs/Release.md b/docs/Release.md
@@ -1,5 +1,11 @@
 # 版本说明
 
+## v2.3.6
+
+- 删除 SearchForm 组件的 grid 布局，因为不太实用、并且计算繁琐。
+- 修复 SearchForm 展开按钮的计算问题。
+- 修订文档。
+
 ## v2.3.5
 
 重新修订文档和 readme

diff --git a/docs/SearchForm.md b/docs/SearchForm.md
@@ -2,7 +2,7 @@
 
 基础查询表单组件，可设置为栅格布局或行内布局，支持 ElementUI 上所有表单组件，语法与原生一致。
 
-> SearchForm 只能用于查询表单，更复杂的表单可使用 RocketForm。SearchForm 支撑三种布局类型：grid 布局、flex 布局和 inline 布局，默认为 flex 模式（左右分布）。
+> SearchForm 只能用于查询表单，更复杂的表单可使用 RocketForm。SearchForm 支撑两种布局类型：flex 布局和 inline 布局，默认为 flex 模式（左右分布）。
 
 ## 基本用法 - 行内表单(inline=inline)
 
@@ -32,41 +32,6 @@
 
 :::
 
-## 基本用法 - 栅格表单(inline=grid)
-
-> 根据屏幕分辨率动态控制，1920 以上每行 4 列，1200 以上每行 3 列，1200 以下每行 2 列
-
-:::demo 通过配置 form 对象，可动态生成 UI 组件，点击查询会更新 model 对象，并通过@handleQuery 事件做后续操作；inline 默认为栅格布局，更完整用法请参考下文详细组件文档。
-
-```html
-<search-form inline="grid" :json="form" :model.sync="queryForm" />
-
-<script>
-  export default {
-    data() {
-      return {
-        queryForm: {},
-        form: [
-          {
-            type: 'input',
-            model: 'user_name',
-            label: '用户',
-            placeholder: '请输入用户名称',
-          },
-          {
-            type: 'switch',
-            model: 'open',
-            label: '状态',
-          },
-        ],
-      };
-    },
-  };
-</script>
-```
-
-:::
-
 ## 基本用法 - Flex 表单(inline=flex)，默认为 flex 布局
 
 > flex 表单为左右结构，左边依然是行内布局，相比于行内表单，flex 只是把查询和重置按钮放到了右边。
@@ -104,11 +69,11 @@
 
 ## 组件属性
 
-| 参数   | 说明               | 类型        | 可选值 | 默认值 |
-| :----- | :----------------- | :---------- | :----- | :----: | ------- | ------ |
-| inline | 行内表单，默认栅格 | String      | `grid  |  flex  | inline` | `flex` |
-| json   | 绑定 JSON 对象     | Array[item] | 无     |   无   |
-| model  | 表单初始化数据     | Object      | 无     |   无   |
+| 参数   | 说明               | 类型        | 可选值 | 默认值  |
+| :----- | :----------------- | :---------- | :----- | :-----: | ------ |
+| inline | 行内表单，默认栅格 | String      | `flex  | inline` | `flex` |
+| json   | 绑定 JSON 对象     | Array[item] | 无     |   无    |
+| model  | 表单初始化数据     | Object      | 无     |   无    |
 
 ## json 参数
 

diff --git a/examples/main.js b/examples/main.js
@@ -33,7 +33,6 @@ Vue.prototype.$api = api;
 Vue.prototype.$request = request;
 
 Vue.config.productionTip = false;
-
 new Vue({
   router,
   render: (h) => h(App),

diff --git a/examples/plugins/element.js b/examples/plugins/element.js
@@ -3,4 +3,4 @@ import './element-variables.scss';
 
 // 全局引入
 import Element from 'element-ui';
-Vue.use(Element, { size: 'small' });
+Vue.use(Element);
diff --git a/examples/views/form/FormType.vue b/examples/views/form/FormType.vue
@@ -1,34 +1,11 @@
 <template>
   <wrapper>
     <h1>行内表单</h1>
-    <search-box>
-      <!-- 表单查询区 -->
-      <search-form
-        inline="inline"
-        :json="json"
-        :model.sync="queryForm"
-        @handleQuery="getTableList"
-      />
-    </search-box>
-    <h1>垂直表单</h1>
-    <search-box>
-      <!-- 表单查询区 -->
-      <search-form
-        inline="grid"
-        :json="json"
-        :model.sync="queryForm"
-        @handleQuery="getTableList"
-      />
-    </search-box>
+    <!-- 表单查询区 -->
+    <search-form inline="inline" :json="json" :model.sync="queryForm" />
     <h1>flex表单（默认风格）</h1>
-    <search-box>
-      <!-- 表单查询区 -->
-      <search-form
-        :json="json"
-        :model.sync="queryForm"
-        @handleQuery="getTableList"
-      />
-    </search-box>
+    <!-- 表单查询区 -->
+    <search-form :json="json" :model.sync="queryForm" />
   </wrapper>
 </template>
 
@@ -63,6 +40,18 @@ export default {
             values.use_status = 2;
           },
         },
+      ],
+      json1: [
+        {
+          type: 'text',
+          model: 'user_name',
+          label: '用户',
+          placeholder: '请输入用户名称',
+          change(val, values, model) {
+            // 可获取所有值，也可直接重置修改其它字段
+            values.use_status = 2;
+          },
+        },
         {
           type: 'radio',
           label: '使用状态',