关于前端:提升效率的筛选器组件-vuefilterbox

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, 感激你的参加!