Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@retailwe/ui-filter

引入

readme

商品筛选

引入

"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 开启筛选

外部样式类

类名 说明
wr-class 根节点样式类

slot

name 说明
filterPopup 筛选弹窗slot