0.1.9 • Published 5 years ago
ad-filter v0.1.9
advanced-filter
安装
npm install ad-filter引入
main.js
import AdFilter from 'ad-filter'
import 'ad-filter/lib/ad-filter.css'demo.vue
<template>
<div id="app">
<adFilter :config="tagTable" @doFilter="search" />
</div>
</template>Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| config | 配置项 | Array | [] |
| separator | 多选状态下参数间的分隔符 | String | ; |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| doFilter | 点击筛选时触发 | 导出的筛选参数(Object) |
Config参数详解
参数示例：
[
{
key: 'type',
content: '类型',
multiple: true,
type: 'select',
separator: 'QQQ',
color: 'red',
background: '#0f0faa',
options: [
{
label: '类型1',
value: 'type1'
},
{
label: '类型2',
value: 'type2'
}
]
},
{
key: 'status',
content: '状态',
multiple: false,
type: 'select',
options: [
{
label: '状态1',
value: 'status1'
},
{
label: '状态2',
value: 'status2'
}
]
},
{
key: 'keyword',
content: '关键字',
type: 'input'
},
{
key: 'dateRange',
content: '日期范围',
type: 'dateRange',
multiple: false
},
{
key: 'date',
content: '日期',
type: 'date',
multiple: true
}
]参数说明：
config数组中，每一个object都代表要配置的可供选择的参数项，object中参数具体解析如下：
config:
| 事件名称 | 说明 | 类型 | 可选值 | |
|---|---|---|---|---|
| key | 筛选参数的key值（必须唯一） | String | ||
| content | 该参数展示在组件上的名称 | String | ||
| type | 筛选项类型 | String | "select","input","date","dateRange" | |
| multiple | 是否多选 | Boolean | true、false (默认false) | |
| separator | 多选时多个值之间的分隔符(仅在多选时有效) | String | 在未指定时使用外部传入的attribute中公共的separator参数 | |
| options | 下拉选项(仅在type为"select"时可用) | Array | ||
| color | 标签字体颜色（不设定则取用默认颜色） | String | ||
| background | 标签背景色（不设定则取用默认颜色） | String |
type:
| 类型名称 | 说明 |
|---|---|
| select | 单选、多选类型筛选项，需配置options参数 |
| input | 输入类型参数 |
| date | 日期类型参数 |
| dateRange | 日期范围类型参数 |
options:
options仅在type为select类型的选项中可用:
示例：
options: [
{
label: '状态1',
value: 'status1'
},
{
label: '状态2',
value: 'status2'
}
]| 参数 | 说明 |
|---|---|
| label | 该选项展示的文字 |
| value | 选项的值 |