vue编写的移动端筛选条组件。
2017-04-14 10:52
399 查看
Introduction
https://github.com/keifc/vue-filter-bar利用vue开发的移动端筛选条组件,方便在移动端进行多条件下搜索,提高用户的体验度,高速提取用户所要浏览的搜索条件,以便提供更精确的用户浏览内容。在使用过程中,希望开发者给予更多的建议和批评,使之更加完善,提供更好的服务。
Example
More
Example
cd demonpm 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对象)
Dodos
Issues
筛选条件返回的数据是json对象,及下图中:价格对应的value值是对象类型,需使用for in循环去获取数据。
相关文章推荐
- vue编写的移动端筛选条组件。
- vue.js移动端tab组件的封装实践实例
- wc-swiper:基于 Vue 实现的 移动端图片轮播组件
- vue移动端轻量级的轮播组件实现代码
- 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
- 滴滴开源基于 Vue.js 的移动端组件库 cube-ui
- vue弹窗组件的编写历程
- vue移动端弹框组件的实例
- 详解用vue编写弹出框组件
- 详解vue移动端日期选择组件
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 基于Vue的移动端图片裁剪组件(vue-imgcut)
- vue-image-crop基于Vue的移动端图片裁剪组件示例
- Mint UI —— 基于 Vue.js 的移动端组件库
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- 基于Vue的移动端图片裁剪组件功能
- 如何实现一个简单的Vue移动端组件库
- Vue编写多地区选择组件
- 利用Vue实现移动端图片轮播组件的方法实例
- Vue.js移动端左滑删除组件的实现代码