脚本宝典收集整理的这篇文章主要介绍了vue编写的移动端条件搜索条组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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循环去获取数据。
以上是脚本宝典为你收集整理的vue编写的移动端条件搜索条组件全部内容,希望文章能够帮你解决vue编写的移动端条件搜索条组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。