Vue’s mobile search bar component

  javascript, vue.js

vue-filter-bar

Vue’s mobile search bar component

Introduction

Using the mobile terminal condition search bar component developed by vue, it is convenient to search under multiple conditions at the mobile terminal, improves the user’s experience, and extracts the search conditions that the user wants to browse at high speed, so as to provide more accurate user browsing content. In the process of use, I hope developers will give more suggestions and criticisms to make it more perfect and provide better services.

Example

Alt text

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): The distance of the filter bar from the top.
  • Name(String, default:”): Button name.
  • Icon(String, default:”): button icon (deprecated).
  • Value(String, default:”): The value of the button.
  • Type(String, default:”): Distinguish filter buttons. When type=’filter’, the list is in filter mode.
  • Showtobheader (boolean, default: true): displays the first-level directory of the bullet box. when type=’filter’, its value is false.
  • DefaultIcon(String, default:”): button default icon.
  • SelectIcon(String, default:”): button is selected icon.
  • SelectIndex(Number, default: 0): Sequence number, when type=’filter’, its value is -1.
  • DetailList(Array, default:[]): List data to the left of the secondary directory.
  • List(Array, default: []): List data to the right of the secondary directory.

API

  • Bar-menus(Array, default: []): Entry for button related data.
  • ShowDialog (Function, Return: Object): Called when the bullet box corresponding to the button is displayed.
  • Closedialog (function, return: object): called when the bullet box disappears.
  • Changetab (function, return: object): called when switching the first-level directory of the bullet box.
  • Changemaniem (function, return: object): called when the list to the left of the secondary directory is selected.
  • Change select (function, return: array): returns the final result. (Note: value of filter results returns json object)

Issues

  1. Filter return data types

The data returned by the filter condition is json objects, as shown in the following figure:

Alt text

The corresponding value is an object type, and the for in loop is used to obtain data.

Related Posts: