商品筛选
引入
"usingComponents": {
"wr-filter": "@retailwe/wr-filter/index",
"wr-filter-popup": "@retailwe/wr-filter/index"
}
代码演示
// 开启筛选后可插入slot
<wr-filter wr-class="filter-container" bind:change="handleFilterChange" layout="{{layout}}" sorts="{{sorts}}" overall="{{overall}}" bind:showFilterPopup="showFilterPopup">
<view slot="filterPopup">
<wr-filter-popup show="{{show}}" bind:showFilterPopupClose="showFilterPopupClose" bind:reset="reset" bind:confirm="confirm">
<view slot="filterSlot">
<view class="price-container">
<view class="price-between">价格区间</view>
<view class="price-ipts-wrap">
<input type="number" class="price-ipt {{minSalePriceFocus ? 'focus' : ''}} {{minActive ? 'active' : ''}}" bindfocus="handleMinPriceFocus" bindblur="handleMinPriceBlur" placeholder="最低价" value="{{minVal}}" bindinput="onMinValAction" />
<text class="price-divided"></text>
<input type="number" class="price-ipt {{maxSalePriceFocus ? 'focus' : ''}} {{maxActive ? 'active' : ''}}" bindfocus="handleMaxPriceFocus" bindblur="handleMaxPriceBlur" placeholder="最高价" value="{{maxVal}}" bindinput="onMaxValAction" />
</view>
</view>
</view>
</wr-filter-popup>
</view>
</wr-filter>
入参
| 参数 |
说明 |
类型 |
默认值 |
是否必要 |
| overall |
1为综合默认 高亮 0为其它模式,不高亮 |
Number |
'' |
否 |
| layout |
1为水平排序 0为垂直排序 |
Number |
1 |
否 |
| sorts |
有三种模式 desc降序,asc升序, 默认为空 |
String |
'' |
否 |
| color |
主颜色 |
String |
#FA550F |
否 |
Events
| 事件 |
是否必要 |
说明 |
| change |
否 |
返回配置参数 |
| showFilterPopup |
否 |
开启筛选 |
外部样式类
slot
| name |
说明 |
| filterPopup |
筛选弹窗slot |