spz-filter 筛选器

支持布局: container

何时使用

需要对专辑商品进行筛选和排序，一般用在专辑页。

代码演示

基本用法

在筛选器中，我们可以用很简单的标识来去实现一些行为。支持的标识如下：

筛选内容元素使用 role="content" 来表示（必需）。
在筛选内容元素内部，spz-render 元素带有 as="default" 属性来表示默认模版（必需）。
- 如果我们想某个筛选维度使用一个单独的 spz-render 来展示，需要将 as 属性的值改为筛选数据中的 param_name 属性使用 . 符号来拆分后的数组的最后一个元素。例如 param_name="filter.v.price" 的价格维度单独使用 spz-render 元素来展示，需要将 as 属性的值改为 price。
在筛选内容元素内，spz-render 模版内容支持的行为有：（当配置了对应的role属性后，组件会根据role的值来实现对应的行为）
- role="reset" 用来标识当前模版的重置按钮（可选）
- role="items" 用来标识多选的元素（可选），例如：spz-selector, select；
- role="price-min" 用来标识价格区间的最小价格输入框（可选），一般是 input 输入框；
- role="price-max" 用来标识价格区间的最大价格输入框（可选），一般是 input 输入框；
- role="selectedCount" 用来标识当前模版已选择的选项数量，当选择了更多/更少选项，会自动更新已选择的数量（可选）
- role="sortBy" 用来标识排序元素（可选），例如：select；
- role="applyAll" 用来标识应用所有选择/输入结果按钮，一般用在移动端的筛选弹窗内；
在筛选结果元素内，spz-render 作为模版的 as 属性标识规则与筛选内容元素内的 spz-render 元素一致，但在筛选结果元素内支持的行为与在筛选内容元素内支持的行为不一致，筛选结果元素的 spz-render 模版内容支持的行为有：
- role="delete" 用来标识删除按钮（可选）
- role="clearAll" 用来标识删除所有筛选结果的按钮（可选）

<spz-filter
  id="collection-filter"
  list-id="collection-list"
  result-id="filter-result"
  collection-id="{{ collection.id }}"
  layout='container'
>
  <div>
    <!-- Filter content -->
    <div role="content">
      <spz-render as="default" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <button role="reset">Reset</button>
            <spz-selector layout="container" multiple role="items" @select="collection-filter.apply(values=event.selectedOptions);">
              <div spz-for='item in data.values' class='filter-item-option flex md:items-center' option="${item.value}">
                <!-- ... -->
              </div>
            </spz-selector>
          </div>
        </template>
      </spz-render>
      <spz-render as="price" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <input role="price-min" type="number" placeholder="From" @input-debounced="collection-filter.apply(value=event.value);">
            <input role="price-max" type="number" placeholder="To" @input-debounced="collection-filter.apply(value=event.value);">
          </div>
        </template>
      </spz-render>
    </div>
    <!-- Sort by -->
    <select role="sortBy" {% if isPC %} @change="collection-list.refresh(sort_by=event.value, redo=true);" {% endif %}>
      <option value="manual" selected>Recommend</option>
      <option value="price-ascending">Price, low to high</option>
      <!-- .... -->
    </select>
  </div>

  <!-- Filter result -->
  <div id="filter-result" hidden>
    <spz-render as="default" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>
    <spz-render as="price" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>

    <div role="clearAll">Clear All</div>
  </div>
</spz-filter>

<spz-list id="collection-list" manual ...>
  <!-- ... -->
</spz-list>

属性

属性名	说明	类型	默认值	是否必需
collection-id	专辑ID	string	-	否
src	请求接口地址，当不存在collection-id时必须设置	string	-	否
list-id	`spz-list` 元素ID	string	-	是
content-id	筛选器内容主体所在容器的ID，当节点间不包含`content`元素时生效	string	-	否
result-id	筛选结果元素ID	string	-	是
tag-group	根据商品标签分组，使用 `,` 分割	string	-	否
disabled-selection-before-finish-render	如果存在此属性，在渲染完成前将禁止改变筛选内容	-	-	否
scroll-content-id	设置筛选器的外部滚动容器，每次选项变更后会滚动到对应的选项	string	-	否
scroll-top-before-refresh-list	存在此属性时，每次列表刷新前会自动滚动到列表最顶部位置	string	-	否

方法

apply

参数	说明	类型	默认值	是否必须
values	已选择的值或者输入的值	Array \| string	-	否

clearAll

清除所有筛选结果，不需要参数。

rerender

重新渲染筛选器，可选传参，当传入参数时将按照所提供的参数渲染筛选器内容

参数	说明	类型	默认值	是否必须
data	筛选器选项配置数组	Array	-	否

事件

unselectable

当触发筛选之后渲染完成之前触发此事件，可用来开启loading等过渡状态，仅在disabled-selection-before-finish-render存在时生效。

selectable

当筛选内容渲染完成后会触发，可用来关闭loading等过渡状态，仅在disabled-selection-before-finish-render存在时生效。

beforeContentRender

在筛选器选项渲染前一刻触发

contentFinish

在筛选器选项内容渲染完毕后触发

resultFinish

在筛选结果的标签区域渲染完成后触发

AI 摘要（LLM Ready）

组件标识：spz-filter
用途一句话：专辑商品筛选。
可识别属性条目：9
可识别方法小节：3
可识别事件小节：5
关键属性名（Top）：collection-id、src、list-id、content-id、result-id、tag-group
关键方法名（Top）：apply、clearAll、rerender
关键事件名（Top）：unselectable、selectable、beforeContentRender、contentFinish、resultFinish
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-filter 筛选器#

#何时使用

#代码演示

#基本用法

#属性

#方法

#apply

#clearAll

#rerender

#事件