UNPKG

dd-vue-screening

Version:

一个干净的轻量级移动端筛选插件,可选一级、两级、搜索等

59 lines (52 loc) 2.26 kB
## 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) * ![gif1](./img/gif1.gif) ## git npm 地址 * [git](https://github.com/duoduoing11/dd-vue-screening) * [npm](https://www.npmjs.com/package/dd-vue-screening)