The filter component vue-filter-box to improve efficiency

Birth of vue-filter-box

When I was on Baidu in the first two years, I often dealt with the data center. An FE may need to maintain multiple centers, but in the tedious and repetitive work, I can gradually find some ways to improve work efficiency, vue-filter-box is one of them!

Most of the pages in the data center are in the form of "screening part" + "table". In order to cope with repeated work and improve their work efficiency, an idea came up: to extract the "screening part" as a component, through Pass in a rule to get a filter, vue-filter-box is such a component ^.^

Briefly introduce this component

vue-filter-box is a dynamic filter component based on view-design. By passing in the filter item structure model , it can help you quickly generate a filter!
-- vue-filter-box

vue-filter-box is based on view-design, there are two reasons to choose view-design:

1. At that time, most of the middle and Taiwan in the group used view-design as the UI framework, and directly based on view-design can save a lot of trouble
2. The components carried by view-design itself are relatively comprehensive, and its own design is also to support the background management system, and the key Form components have not found any flaws in use.

Here, thanks to view-design for making our work easier!

In fact, vue-filter-box has already sent a rough version before: v2 document , but due to the low level at that time and the lack of understanding of component design, the API design and internal implementation are somewhat confusing, so This time it is a comprehensive refactoring, so the big version 3.0.0 is used for release😊

Get started quickly with vue-filter-box

vue-filter-box is very simple to use, here is a very simple 🌰 (example):

<template>
  <vue-filter-box :value="filterValue" :model="model" :width="220">
    <template v-slot:footer>
      <i-button>提交</i-button>
    </template>
  </vue-filter-box>
</template>

<script>
import { VueFilterBox } from 'vue-filter-box';

export default {
  components: {
    VueFilterBox,
  },
  data() {
    return {
      model: [
        {
          type: 'i-input',
          label: 'Keyword',
          key: 'keyword',
          props: {
            placeholder: 'Please input',
          },
        },
        {
          type: 'i-select',
          label: 'Type',
          key: 'type',
          options: [
            { label: 'Type1', value: 'type1' },
            { label: 'Type2', value: 'type2' },
          ],
          props: {
            placeholder: 'Please select',
          },
        },
      ],
      filterValue: {},
    };
  },
}
</script>
</script>

model is the core component of vue-filter-box, which consists of modelItem ; modelItem is the filter item that constitutes the entire filter; for example, the above model will generate a filter consisting of an input box and a drop-down box:

type represents the filter item component, you can use a string, such as: i-input , but please make sure that the component has been registered globally; you can also pass in a Vue Component, see v3 document for details!

value is the selected value of the filter item of vue-filter-box, for example: if you enter yaking shaking value Type1 be as follows:

{
  keyword: 'yaking shaking',
  type: 'type1'
}

Therefore, you can also modify the filter selection value by modifying value ~

Other features of vue-filter-box

1. Support loading, and support custom loading style
2. support disabled
3. Support size setting: default , small , large , please make sure the component you use supports setting size
4. Support custom filter item title, see v3 document for details
5. Support vertical layout
6. Filter items and filter item titles support looser width settings
7. Support filter verification, single filter item verification, filter reset, single filter item reset
8. Comparing OCD features: filter component aliases!

The filter component alias is a function that is more suitable for obsessive-compulsive users. You can set the filter item component alias, for example:

{
  input: 'i-input',
  select: 'i-select',
}

After the filter item component is set to input , it is equivalent to i-input ...

"What a warm function!"

Warehouse Address

Github address: vue-filter-box

If you find it helpful, you can install and use it in your project, or give a star ⭐️!

feedback

If you find problems or deficiencies in the components, you can submit your problems to github issue , or submit a Pull Request, thank you for your participation!