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
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 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
- Filter return data types
The data returned by the filter condition is json objects, as shown in the following figure:
The corresponding value is an object type, and the for in loop is used to obtain data.