更新记录
1.0.3(2020-10-20)
修复选择日期后,再次选择多选或单选日期不显示问题
1.0.2(2020-10-20)
1、修复留言中报错问题,是因为Format没定义导致(我的项目在公共js中定义,所以没发现此问题) 2、我的项目基于colorUI,忽略样式问题,已对样式优化
查看更多依赖组件
uni-drawer mx-datepicker 代码单选多选参考了sl-filter
使用说明
<template>
<view>
<fjj-condition @touchmove.stop :list="list" :visibleDrawer="visibleDrawer" @result="resultConditon" />
</view>
</template>
import fjjCondition from "@/components/fjj-condition/fjj-condition.vue";
export default {
data() {
return {
visibleDrawer: false,
list: [
{
title: "时间",
type: "range", //range不带时分秒范围筛选 rangetime带时分秒范围筛选
key: "time",
},
{
title: "类型",
type: "custom",
key: "typeKey",
isMutiple: false, //是否多选
detailList: [
{
title: "test",
value: "1",
},
{
title: "test2",
value: "2",
},
],
},
{
title: "金额",
type: "rangenumber", //数字筛选范围
key: 'paid'
},
],
},
},
components: {
fjjCondition,
},
methods: {
//点击确定后返回参数
resultConditon(obj) {
console.log(obj);
},
},
};
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
visibleDrawer | Boolean | false | 控制筛选面板显示 必填 |
list | Array | [] | 筛选面板列表数据 必填 |
color | String | #4D7BFE | 颜色 选填 |
result | Function | 点击确定后返回值 |
list值说明
属性名 | 类型 | 说明 |
---|---|---|
type | String | range时间范围筛选、rangetime带时分秒范围筛选、custom单选多选、rangenumber数量范围筛选 |
title | String | 显示名称 |
key | String | 名称key |
isMutiple | Boolean | type为custom生效,是否支持多选 |
detailList | Array | type为custom生效,选择列表 |
result返回值说明
属性名 | 类型 | 说明 |
---|---|---|
hasChoose | Boolean | 筛选面板用户是否选择值 |
result | Object | list对应key选择的值 |
str_result | Object | list对应key选择的值 ,key选的值返回逗号隔开的字符串 |
visibleDrawer | Boolean | 通知父组件隐藏面板 |