dd-vue-screening

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

• 预览地址

git npm 地址

• git
• npm