web-component-gallery 2.3.32 → 2.3.34

package/lib/search/index.vue

@@ -6,7 +6,7 @@
         :key="i"
         :prop="node.model"
         :label="node.label"
-        :style="getFormWidth(node, matchMediaSize)"
+        :style="getFormWidth(node)"
       >
         <RenderComp
           v-on="node.event"
@@ -21,7 +21,7 @@
       <slot name="actions" />
       <Button type="primary" html-type="submit">{{ actionsText.primary }}</Button>
       <Button @click="handleReset">{{ actionsText.cancel }}</Button>
-      <a @click="advanced = !advanced" v-if="copyFormSetting.length > this.matchMediaSize - 1">
+      <a @click="advanced = !advanced" v-if="showToggleBtn">
         {{ advanced ? '收起' : '展开' }}
         <Icon :type="advanced ? 'up' : 'down'" />
       </a>
@@ -46,7 +46,7 @@ export default {
   data() {
     return {
       advanced: false,
-      matchMediaSize: 0
+      matchMediaSize: 1
     }
   },
   model: {
@@ -68,9 +68,7 @@ export default {
     layoutSize: {
       type: Number,
       default: 4,
-      validator: value => {
-        return value <= 5
-      }
+      validator: value => value <= 5
     },
     // 紧凑型和宽松型
     // default 宽松型
@@ -91,6 +89,11 @@ export default {
     autoCall: {
       type: Boolean,
       default: false
+    },
+    /* 是否默认全展开 */
+    defaultExpanded: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -105,45 +108,88 @@ export default {
     matchMedia() {
       return {
         '(max-width: 576px)': 1,
-        '(min-width: 576px) and (max-width: 992px)': this.layoutSize - 2,
+        '(min-width: 576px) and (max-width: 992px)': Math.max(this.layoutSize - 2, 1),
         '(min-width: 992px)': this.layoutSize
       }
     },
     copyFormSetting() {
       return this.formSetting.filter(node => !node.hidden)
     },
+    // 是否显示切换按钮：默认全展开时不显示，其他情况根据是否需要折叠来判断
+    showToggleBtn() {
+      // 默认全展开时不显示切换按钮
+      if (this.defaultExpanded) {
+        return false
+      }
+      // 其他情况：当表单项数量超过当前屏幕能显示的数量时才显示
+      return this.copyFormSetting.length > this.matchMediaSize - 1
+    },
     count() {
-      return this.advanced ? this.copyFormSetting.length : this.matchMediaSize - 1
+      // 默认全展开时，显示所有项
+      if (this.defaultExpanded) {
+        return this.copyFormSetting.length
+      }
+      // 否则根据展开状态和响应式尺寸计算显示数量
+      return this.advanced ? this.copyFormSetting.length : Math.max(this.matchMediaSize - 1, 1)
     }
   },
   mounted() { 
+    // 初始化展开状态
+    this.advanced = this.defaultExpanded
+    // 自动查询
     this.autoCall && this.handleSearch()
-    this.matchMediaSize = this.layoutSize
-    Object.keys(this.matchMedia).forEach(media =>
-      window.matchMedia(media).addEventListener('change', this.handleResize)
-    )
+    // 初始化响应式尺寸
+    this.updateMatchMediaSize()
+    // 监听媒体查询变化
+    this.bindMediaListeners()
+  },
+  beforeDestroy() {
+    // 清理事件监听器，防止内存泄漏
+    this.unbindMediaListeners()
   },
   methods: {
-    handleResize(x) {
-      x.matches && (this.matchMediaSize = this.matchMedia[x.media])
-    },
-    getFormWidth(e) {
-      const gap = {
-        middle: '16px',
-        default: '24px'
-      } 
-      return `width: calc((${(100 / this.matchMediaSize) * (e.size ?? 1)}% - ${
-        gap[this.searchStyle]
-      })); margin-right: ${gap[this.searchStyle]};`
+    // 绑定媒体查询监听器
+    bindMediaListeners() {
+      Object.keys(this.matchMedia).forEach(media =>
+        window.matchMedia(media).addEventListener('change', this.handleResize)
+      )
+    },
+    // 解绑媒体查询监听器
+    unbindMediaListeners() {
+      Object.keys(this.matchMedia).forEach(media =>
+        window.matchMedia(media).removeEventListener('change', this.handleResize)
+      )
+    },
+    // 更新响应式尺寸
+    updateMatchMediaSize() {
+      const size = Object.keys(this.matchMedia).find(media => 
+        window.matchMedia(media).matches
+      )
+      this.matchMediaSize = Math.max(size ? this.matchMedia[size] : this.layoutSize, 1)
+    },
+    // 处理窗口尺寸变化
+    handleResize({ matches, media }) {
+      if (matches) {
+        this.matchMediaSize = Math.max(this.matchMedia[media], 1)
+      }
+    },
+    // 计算表单宽度
+    getFormWidth({ size }) {
+      const gapMap = { middle: '16px', default: '24px' }
+      const gap = gapMap[this.searchStyle]
+      const percentage = (100 / this.matchMediaSize) * (size ?? 1)
+      return `width: calc(${percentage}% - ${gap}); margin-right: ${gap};`
     },
+    // 处理搜索
     handleSearch(e) {
-      e && e.preventDefault()
+      e?.preventDefault()
       const searchForm = {}
-      this.copyFormSetting.forEach(node => 
-        this.$set( searchForm, node.model, this.form[node.model] ))
+      this.copyFormSetting.forEach(({ model }) => 
+        this.$set(searchForm, model, this.form[model]))
       this.form = { ...searchForm }
       this.$emit('handleSearch', searchForm) 
     },
+    // 处理重置
     handleReset() {
       this.form = resetFields(this.form)
       this.$refs.searchForm.clearValidate()

package/lib/search/style/index.less

@@ -28,7 +28,6 @@
   
   &__Actions {
     flex: 1;
-    justify-content: flex-end;
-    .flex-layout(@flexGap: 0 8px);
+    .flex-mixins(@justify: flex-end, @gap: 0 8px);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.3.32",
+  "version": "2.3.34",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [