vue編寫的移動端條件搜索條組件

vue-filter-bar

vue編寫的移動端條件搜索條組件

Introduction

利用vue開發的移動端條件搜索條組件，方便在移動端進行多條件下搜索，提升用戶的體驗度，高速提取用戶所要瀏覽的搜索條件，以便提供更精確的用戶瀏覽內容。在使用過程當中，但願開發者給予更多的建議和批評，使之更加完善，提供更好的服務。

Example

More Example

cd demo
npm i
npm run dev

Use Setup

Install vue-filter-bar

npm i vue-filter-bar --save

Vue mount

// import
import FilterBar from 'vue-filter-bar'

export default {
  components: {
    FilterBar
  }
}

Use in SPA

<template>
  <div id="app">
    <filter-bar 
      top="40" 
      :bar-menus="barMenus" 
      @showDialog="handleShowDialog" 
      @closeDialog="handleCloseDialog" 
      @changeTab="handleChangeTab"
      @changeMainItem="handleChangeMainItem" 
      @changeSelect="changeData">
    </filter-bar>
  </div>
</template>

<script>
  import FilterBar from '@/components/FilterBar'
  import barMenus from '@/data';
  export default {
      name: 'app',
      data() {
        return {
          barMenus: barMenus
        }
      },
      methods: {
        handleShowDialog(v) {
          // console.log(v);
        },
        handleCloseDialog(v) {
          // console.log(v);
        },
        handleChangeTab(v) {
          // console.log(v);
        },
        handleChangeMainItem(v) {
          // console.log(v)
        },
        changeData(v) {
          console.log(v);
        }
      },
      components: {
        'filter-bar': FilterBar
      }
    }
  </script>

Data Structure

data.js

Data Params

• top(Number, default: 0): 篩選條離頂部的距離。
• name(String, default: ''): 按鈕名稱。
• icon(String, default: ''): 按鈕icon (棄用)。
• value(String, default: ''): 按鈕的值。
• type(String, default: ''): 區分篩選按鈕，當type='filter'時，列表爲篩選模式。
• showTabHeader(Boolean, default: true): 顯示彈框一級目錄， 當type='filter'時，其值爲false。
• defaultIcon(String, default: ''): 按鈕默認icon。
• selectIcon(String, default: ''): 按鈕被選中icon。
• selectIndex(Number, default: 0): 序號，當type='filter'時，其值爲-1。
• detailList(Array, default:[]): 二級目錄左側列表數據。
• list(Array, default: []): 二級目錄右側列表數據。

API

• bar-menus(Array, default: []): 按鈕相關數據的入口。
• showDialog(Function, return: Object): 顯示按鈕相對應的彈框時調用。
• closeDialog(Function, return: Object): 彈框消失時調用。
• changeTab(Function, return: Object): 切換彈框一級目錄時調用。
• changeMainItem(Function, return: Object): 選擇二級目錄左側列表時調用。
• changeSelect(Function, return: Array): 返回最終結果。(注：篩選結果的value返回json對象)

Issues

1. 篩選返回數據類型

篩選條件返回的數據是json對象，及下圖中：

對應的value值是對象類型，需使用for in循環去獲取數據。