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 的起因有两个:
- 过后组内负责的中台大部分都应用 view-design 作为 UI 框架, 间接基于
view-design
能够省去很多麻烦 - 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 的其余性能
- 反对 loading, 同时反对自定义 loading 款式
- 反对 disabled
- 反对 size 设置:
default
,small
,large
, 请确保你应用的组件反对设置size
- 反对自定义筛选项题目, 具体查看 v3 文档
- 反对垂直布局
- 筛选项以及筛选项题目反对更加宽松的宽度设置
- 反对筛选器校验, 单个筛选项校验, 筛选器重置, 单个筛选项重置
- 比拟强迫症的性能: 筛选器组件别名!
筛选器组件别名是一个比拟适宜强迫症用户的性能, 你能够通过设置筛选项组件别名, 比方:
{
input: 'i-input',
select: 'i-select',
}
前面筛选项组件设置为 input
便等同于 i-input
…
“ 好暖的性能!”
仓库地址
Github 地址: vue-filter-box
如果感觉对你有所帮忙, 能够在你的我的项目中装置进行应用, 或是给个 star ⭐️!
问题反馈
如果发现组件中存在的问题或是有余,能够提交你的问题到 github issue, 或提交一个 Pull Request, 感激你的参加!