vue编写的移动端条件搜索条组件
利用vue开发的移动端条件搜索条组件,方便在移动端进行多条件下搜索,提高用户的体验度,高速提取用户所要浏览的搜索条件,以便提供更精确的用户浏览内容。在使用过程中,希望开发者给予更多的建议和批评,使之更加完善,提供更好的服务。
cd demo npm i npm run dev
npm i vue-filter-bar --save
// import
import FilterBar from 'vue-filter-bar'
export default {
components: {
FilterBar
}
}
<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>
筛选条件返回的数据是json对象,及下图中:
对应的value值是对象类型,需使用for in循环去获取数据。