更新记录

1.0.0（2024-12-10） 下载此版本

有问题联系开发者

平台兼容性

使用示例

<template>
  <view>
      <sh-filter :list="list"></sh-filter>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
          {
            label: '范围',
            field: 'e',
            type: 'rangeInput',
            child: [
              {
                label: '10-100米',
                value: [10, 100],
              },
              {
                label: '0-120米',
                value: [0, 120],
              },
              {
                label: '70-110米',
                value: [70, 110],
              },
            ],
          },
          {
            label: '排序',
            field: 'ff',
            type: 'switch',
            child: [
              {
                label: '升序',
                value: 'asc',
              },
              {
                label: '降序',
                value: 'desc',
              }
            ],
          },
          {
            label: '单选日期',
            field: 'datei',
            type: 'date',
            startDate: '2024-12-16',
          },
          {
            label: '多选日期',
            field: 'dateil',
            type: 'date',
            startDate: '2024-12-16',
            range: true
          },
          {
            label: '输入框',
            field: 'f',
            type: 'input',
            child: [
              {
                label: '待选值1',
                value: '333',
              },
              {
                label: '待选值2',
                value: '222',
              },
              {
                label: '待选值3',
                value: '11',
              },
            ],
          },
          {
            label: '圆角选择',
            type: 'select',
            mode: 'button', // button -按钮类型  cell-表格类型
            radius: '40px',
            max: 1,
            field: 'i',
            child: [
              {
                label: 'S码',
                value: '升序',
              },
              {
                label: 'M码',
                value: '升序3',
              },
              {
                label: 'L码',
                value: '升序2',
              },
              {
                label: 'XL码',
                value: '升序1',
              },
              {
                label: 'XXL码',
                value: '降序',
              },
            ],
          },
          {
            label: '颜色选择',
            type: 'select',
            field: 'i',
            child: [
              {
                label: '红色',
                value: '红色',
              },
              {
                label: '黑色',
                value: '黑色',
              },
              {
                label: '白色',
                value: '白色',
              },
              {
                label: '灰色',
                value: '灰色',
              },
            ],
          },
          {
            label: '星巴克',
            type: 'radio',
            field: 'bd',
            child: [
              {
                label: '中杯',
                value: '中杯',
              },
              {
                label: '大杯',
                value: '大杯',
              },
              {
                label: '超大杯',
                value: '超大杯',
              },
            ],
          },
          {
            label: '范围12',
            type: 'group',
            fixed : true,
            child: [
              {
                label: '单个选择',
                field: 'ia',
                type: 'radio',
                child: [
                  {
                    label: 'S码',
                    value: '升序',
                  },
                  {
                    label: 'M码',
                    value: '升序3',
                  },
                  {
                    label: 'L码',
                    value: '升序2',
                  },
                  {
                    label: 'XL码',
                    value: '升序1',
                  },
                  {
                    label: 'XXL码',
                    value: '降序',
                  },
                ],
              },
              {
                label: '多个选择',
                field: 'ii',
                type: 'select',
                child: [
                  {
                    label: 'S码',
                    value: '升序',
                  },
                  {
                    label: 'M码',
                    value: '升序3',
                  },
                  {
                    label: 'L码',
                    value: '升序2',
                  },
                  {
                    label: 'XL码',
                    value: '升序1',
                  },
                  {
                    label: 'XXL码',
                    value: '降序',
                  },
                ],
              },
              {
                label: '选择尺码1',
                field: 'i',
                type: 'select',
                mode: 'button',
                max: 1,
                child: [
                  {
                    label: 'S码',
                    value: '升序',
                  },
                  {
                    label: 'M码',
                    value: '升序3',
                  },
                  {
                    label: 'L码',
                    value: '升序2',
                  },
                  {
                    label: 'XL码',
                    value: '升序1',
                  },
                  {
                    label: 'XXL码',
                    value: '降序',
                  },
                ],
              },
              {
                label: '是否快递',
                type: 'switch',
                field: 'ij',
                child: [
                  {
                    label: 'M码',
                    value: true,
                  },
                  {
                    label: 'S码',
                    value: false,
                  },
                ]
              },
              {
                label: '选择日期',
                type: 'date',
                range: true,
                field: 'idj',
              },
            ],
          },
        ]
    }
  }
}
</script>

属性 Porps

配置项 Options

筛选类型 OptionTypes

事件 Emit