更新记录

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 通知父组件隐藏面板

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问