dd-vue-screening
Version:
一个干净的轻量级移动端筛选插件,可选一级、两级、搜索等
59 lines (52 loc) • 2.26 kB
Markdown
## Welcome to dd-vue-screening
dd-vue-screening是一个干净的轻量级移动端筛选插件,可选一级、两级、搜索等。
## dd-vue-screening 有哪些功能
* 单层筛选
* 两层筛选
* 搜索
## Install
```
npm install dd-vue-screening --save
```
## Import
新建 ddVueScreening.js
```
import Vue from "vue"
import ddVueScreening from "dd-vue-screening"
import "dd-vue-screening/lib/screening.css"
Vue.use(ddVueScreening)
```
并在 main.js 中 import
```
import "./ddVueScreening目录/ddVueScreening.js";
```
## Use
在需要使用的组件内直接是用screening标签
```
<template>
<screening :screeningData="screeningData" v-on:change="conditionChange" v-on:search="searchCallBack"></screening>
</template>
```
## Attributes
* screeningData:Array 数组,筛选条件数据集
* data:Array 数组;筛选条件主数据
* showTier:Number 数字;筛选显示层级,2级可显示省市
* stringCode:String 字符串;data 数据中 code 字段名
* stringName:String 字符串;data 数据中 name 字段名
* localCode:String 字符串;省市选择时定位城市 code
* localName:String 字符串;省市选择时定位城市 name
* default:Object;默认选中数据
* search:Boolean;true | false;true 时显示搜索图标并执行search回调,其他数据可不传;默认值为 false
* change:function,筛选条件选择后的回调方法,参数(key, screeningData, dataKey, data, listKey, listData)
* key:Number 数字;已选数据在 screeningData 数组中的一级下标
* screeningData:Array 数组;筛选条件数据集
* dataKey:Number 数字;已选数据在 screeningData.data 数组中的二级下标
* data:Array 数组;筛选条件主数据
* listKey:Number 数字;当showTier = 2时,已选数据在 screeningData.data['数组名'] 数组中的三级下标;showTier != 2时,undefined
* listData:Array 数组;当showTier = 2时,screeningData.data 下的子集数组
## Screening show
* [预览地址](https://duoduoing11.github.io/dd-vue-screening/dist/index.html)
* 
## git npm 地址
* [git](https://github.com/duoduoing11/dd-vue-screening)
* [npm](https://www.npmjs.com/package/dd-vue-screening)