仿ant design pro component做一个可以展开收起的vue搜索表单

• 仿照了ant design的筛选表单做了一个功能一模一样的vue版本，根据屏幕自适应
• 本质是封装了el-form，内部实现使用了render函数，兼容el-form的所有api，放心使用就好
• 除了el-form的所有api，自己的api有btns,支持传入按钮或组件渲染

type btns = btn[]
interface btn {
  type?: String
  icon?: String
  name?: String
  click?: () => void
  render?: () => Vue.VNode
}

直接上代码

npm i el-form-expand -s

<template>
  <div id="app">
    <div class="search">
      <ElFormExpand ref="form" :rules="ruleForm" :model="form">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="活动名称2" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="活动名称3" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="活动名称4" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="活动名称5" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="活动名称6" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
      </ElFormExpand>
    </div>
  </div>
</template>

<script>
import ElFormExpand from '../packages/el-form-expand/index'
export default {
  name: 'App',
  components: {
    ElFormExpand
  },
  data() {
    return {
      form: {},
      ruleForm: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.$refs.form.getRef().validate()
    }, 1000)
  }
}
</script>

<style>
.search {
  margin: 0 auto;
  width: 90%;
  padding: 40px 24px;
  border: 1px solid #ebedf1;
}
</style>

github地址