Make a vUE search form that expands and collapses like the Ant Design Pro Component

• Made a vue version that mimics Ant Design’s filter form, adapting to the screen
• The essence is to encapsulate the EL-Form, internal implementation using the render function, compatible with all THE EL-Form API, feel free to use good
• In addition to all of el-Form’s apis, its own API has BTNS, which supports incoming button or component rendering

type btns = btn[]
interface btn {
  type? :Stringicon? :Stringname? :Stringclick? :() = > voidrender? :() = > Vue.VNode
}
Copy the code

Go straight to code

npm i el-form-expand -s

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

        <el-form-item label="Activity Name 2" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="Activity Name 3" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="Activity Name 4" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="Activity Name 5" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="Activity Name 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: 'Please enter an activity name'.trigger: 'blur' },
          { min: 3.max: 5.message: 'Between 3 and 5 characters long'.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>
Copy the code

Making the address