GoodsFilter 商品筛选

商品列表筛选面板，支持价格区间、属性分组与地址入口等电商常见筛选场景。

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 设置默认展示行数 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 点击事件 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>
  <re-goods-filter :visible="visibleBasic" :priceRanges="priceRanges" :filterGroups="filterGroups" selectedAddress="北京市朝阳区望京街道" @update:visible="onBasicVisibleChange" />
  <re-goods-filter :visible="visibleMaxLine" :priceRanges="priceRanges" :filterGroups="filterGroups" :maxVisibleOptions="3" selectedAddress="北京市朝阳区望京街道" @update:visible="onMaxLineVisibleChange" />
  <re-goods-filter :visible="visibleEvent" :priceRanges="priceRanges" :filterGroups="filterGroups" selectedAddress="北京市朝阳区望京街道" @update:visible="onEventVisibleChange" @reset="onReset" @confirm="onConfirm" @confirm-detail="onConfirmDetail" @click-address="onClickAddress" @select-attr="onSelectAttr" @select-price="onSelectPrice" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-goods-filter />。

API

GoodsFilter Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示筛选面板	N
priceRanges	`Array<GoodsFilterOption>`		价格区间配置	N
filterGroups	`Array<GoodsFilterGroup>`		筛选分组配置	N
maxVisibleOptions	`number`	6	每组默认显示的选项数量	N
addressTitle	`string`	"配送地址"	配送地址标题	N
selectedAddress	`string`	""	当前选中地址	N
emptyAddressText	`string`	"您还没有选中的地址"	空地址提示文案	N
showAddress	`boolean`	true	是否展示地址模块	N
resetDisable	`boolean`	false	重置按钮是否禁用	N
resetText	`string`	"重置"	重置按钮文案	N
confirmText	`string`	"确定"	确认按钮文案	N

GoodsFilter Events

名称	参数	描述
close	-	关闭时触发
reset	-	重置时触发
confirm	summary: string	确认时触发
confirm-detail	detail: UTSJSONObject	-
click-address	-	-
select-price	key: string	-
select-attr	key: string	-
update:visible	value: boolean	显隐变化时触发

GoodsFilter Slots

名称	描述
-	-

FloatingPanel 浮动面板

拖动底部面板，在不同锚点之间停靠。

内容锚点

演示
代码示例
引入
API