vue-filter-box 的诞生

前两年在 Baidu 时, 经常和数据中台打交道, 一个 FE 可能须要保护着多个中台, 但在繁琐又反复的工作中, 逐渐能够摸索出一些晋升工作效力的办法, vue-filter-box 就是其中之一!

数据中台大多数页面都是以"筛选局部" + "表格"的模式存在, 为了应酬反复的工作, 晋升本人的工作效率, 便萌发了一个想法: 将"筛选局部"抽出来作为一个组件, 通过传入规定即可失去一个筛选器, vue-filter-box 就是这么一个组件 ^.^

简略介绍这个组件

vue-filter-box 是一款基于 view-design 实现的动静筛选器组件, 通过传入筛选项构造 model, 能够帮忙你疾速生成一个筛选器!
-- vue-filter-box

vue-filter-box 基于 view-design, 抉择 view-design 的起因有两个:

  1. 过后组内负责的中台大部分都应用 view-design 作为 UI 框架, 间接基于 view-design 能够省去很多麻烦
  2. view-design 自身携带的组件是比拟全面的, 自身的设计也是为了撑持后盾管理系统, 而且要害的 Form 组件在应用上也未发现一些硬伤

在此, 感激 view-design 为咱们的工作带来了便当!

其实 vue-filter-box 在之前曾经发过一个比拟毛糙的版本了: v2 文档, 但因为过后的程度较低以及对组件设计了解上的有余, 导致 API设计以及外部实现都有些凌乱, 因而这次算是一次全面的重构, 所以应用了 3.0.0 的大版本进行公布

疾速上手 vue-filter-box

vue-filter-box 在应用上非常简单, 这里也非常简单地举个 (例子):

<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 是 vue-filter-box 的外围组成部分, 由 modelItem 形成; modelItem 是形成整个筛选器的筛选项; 比方下面的 model, 将会生成一个由输入框和下拉框形成的筛选器:

type 示意筛选项组件, 你能够应用字符串, 比方: i-input, 但请确保该组件曾经全局注册; 你也能够传入一个 Vue Component, 具体能够查看 v3 文档!

value 是 vue-filter-box 的筛选项选中值, 例如: 你在筛选器输入框中输出 yaking shaking, 下拉框选中 Type1, 则对应的 value 将会如下:

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

因而, 你也能够通过批改 value 从而批改筛选器选中值~

vue-filter-box 的其余性能

  1. 反对 loading, 同时反对自定义 loading 款式
  2. 反对 disabled
  3. 反对 size 设置: default, small, large, 请确保你应用的组件反对设置 size
  4. 反对自定义筛选项题目, 具体查看 v3 文档
  5. 反对垂直布局
  6. 筛选项以及筛选项题目反对更加宽松的宽度设置
  7. 反对筛选器校验, 单个筛选项校验, 筛选器重置, 单个筛选项重置
  8. 比拟强迫症的性能: 筛选器组件别名!

筛选器组件别名是一个比拟适宜强迫症用户的性能, 你能够通过设置筛选项组件别名, 比方:

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

前面筛选项组件设置为 input 便等同于 i-input...

"好暖的性能!"

仓库地址

Github 地址: vue-filter-box

如果感觉对你有所帮忙, 能够在你的我的项目中装置进行应用, 或是给个 star ⭐️!

问题反馈

如果发现组件中存在的问题或是有余，能够提交你的问题到 github issue, 或提交一个 Pull Request, 感激你的参加!