提升效率的篩選器元件 vue-filter-box

Ruofee發表於2022-02-05
元件VueFilter

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, 將會生成一個由輸入框和下拉框構成的篩選器:

image.png

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, 感謝你的參與!

相關文章