资讯专栏INFORMATION COLUMN

vue编写的移动端条件搜索条组件

Ethan815 / 1993人阅读

摘要:编写的移动端条件搜索条组件利用开发的移动端条件搜索条组件,方便在移动端进行多条件下搜索,提高用户的体验度,高速提取用户所要浏览的搜索条件,以便提供更精确的用户浏览内容。显示弹框一级目录,当时,其值为。

vue-filter-bar

vue编写的移动端条件搜索条组件

Introduction
利用vue开发的移动端条件搜索条组件,方便在移动端进行多条件下搜索,提高用户的体验度,高速提取用户所要浏览的搜索条件,以便提供更精确的用户浏览内容。在使用过程中,希望开发者给予更多的建议和批评,使之更加完善,提供更好的服务。
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



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对象)

Issues

筛选返回数据类型

筛选条件返回的数据是json对象,及下图中:

对应的value值是对象类型,需使用for in循环去获取数据。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101126.html

相关文章

  • 如何用vue打造一个移动音乐播放器

    摘要:写在前面没错,这就是慕课网上的那个音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合提升的好项目,做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试,也确实对我的业务能 写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vu...

    lanffy 评论0 收藏0
  • Vue.js 实践(2):实现多筛选、搜索、排序及分页表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    Profeel 评论0 收藏0
  • Vue.js 实践(2):实现多筛选、搜索、排序及分页表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    ChanceWong 评论0 收藏0
  • vue.js 移动音乐app(一) 基础组件 scroll

    一、 基础实现 (1)功能 对 better-scroll 插件的基本封装,实现移动端的滚动 (2)实现 引入 better-scroll props probeType: better-scroll 配置项之一 (1)取值: 1 滚动的时候会派发 scroll 事件,会截流。 2 滚动的时候实时派发 scroll 事件,不会截流。 3 除了实时派发 scroll 事件,在 swipe 的情况...

    wqj97 评论0 收藏0

发表评论

0条评论

Ethan815

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<