【微前端】国际化中后台系统系列-2

本篇文章将介绍中后台系统中列表页搜索区域的使用，基于grid实现的响应式搜索控件

效果展示

用法demo

<script setup lang="ts">
const schemas = [
    {
     // 标题
      title: $t('输入框:'),
      // 字段名
      field: 'test1',
      // 列数
      column: 1,
      // 组件配置
      component: {
        // 组件名或者组件本身
        vm: 'el-input',
        // 组件值
        value: '',
        // 组件属性
        props: { placeholders: $t('请输入') },
        // 组件事件
        listeners: {
          change(v: string) {
            console.log('change>>>>', v, state)
          },
        },
      },
    },
    {
      title: $t('输入框:'),
      field: 'test2',
      column: 1,
      component: {
        vm: ElInput,
        value: '',
        props: {
          placeholders: $t('请输入test'),
          // disabled: true,
        },
        listeners: {
          change(v: string) {
            console.log('change>>>>', v)
          },
        },
      },
    },
    {
      title: $t('下拉框:'),
      field: 'test3',
      column: 1,
      component: {
        vm: 'ElInput',
        value: [],
        props: {
          multiple: true,
          placeholders: $t('请输入test'),
        },
        listeners: {
          change(v: string) {
            console.log('change>>>>', v)
          },
        },
      },
    },
    {
      title: $t('日期:'),
      field: 'test2',
      column: 2,
      component: {
        vm: 'el-date-picker',
        value: [],
        props: {
          type: 'datetimerange',
          valueFormat: 'x',
          defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)],
        },
        listeners: {
          change(v: string) {
            console.log('change>>>>', v)
          },
        },
      },
    },
]

// 搜索
function onSearch(model: any) {
  console.log({ model })
}

// 重置
function onReset(model: any) {
  console.log({ model })
}
</script>

<template>
  <UiFormSearch
    :schemas="schemas"
    :gap="12"   // (表单项)grid item的间距，默认12
    :triggerHideRow="1"   // 超出多少行显示展开收起icon，默认值1
    :minItemWidth="250"  // 表单项的最小宽度，默认值250
    defaultExpand   // 是否默认展开，默认值true
    @reset="onReset" 
    @search="onSearch"
  />
</template>

最后

UiFormSearch组件的代码可以在后续开源后再查看，欢迎大家一起探讨。