过滤栏

升序降序, 下拉框，开关，自定义筛选

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

cl-filter-bar

Props

参数	说明	类型	可选值	默认值
isSticky	是否吸顶	boolean		false

Events

事件名称	说明	回调参数
change	cl-filter-item 数据变化时触发	function({ prop, value })

cl-filter-item

Props

参数	说明	类型	可选值	默认值
value	绑定值，当时下拉多选时，必须是数组	string, number, array
prop	唯一标识, change 时返回	string
type	筛选类型	string	dropdown / order
label	标题	string
disabled	是否禁用	boolean		false
multiple	下拉框是否多选	boolean		false
theme	下拉框主题	string	default / grid	default
grid-cols	格布局下的列数	number		4
options	下拉数据选项	array
options.label	文本内容	string
options.value	绑定值	number / string
options.disabled	是否禁用	boolean		false

Events

事件名称	说明	回调参数
change	绑定值发生改变时触发	function(value)

Slots

插槽名称	说明
dropdown	下拉框的插槽

示例

基本用法

<template>
	<cl-filter-bar @change="onChange">
		<!-- 多选下拉 -->
		<cl-filter-item
			v-model="arr"
			label="多选"
			:options="list"
			type="dropdown"
			multiple
			prop="rank"
		></cl-filter-item>

		<!-- 单选下拉 -->
		<cl-filter-item
			v-model="str"
			label="单选"
			:options="list"
			type="dropdown"
			prop="rank"
		></cl-filter-item>

		<!-- 升序，降序 -->
		<cl-filter-item prop="price" v-model="sort" label="价格" type="sort"></cl-filter-item>
	</cl-filter-bar>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						label: "综合排序",
						value: 1
					},
					{
						label: "距离最近",
						value: 2
					},
					{
						label: "好评优先",
						value: 3
					},
					{
						label: "起送价最低",
						value: 4
					},
					{
						label: "配送最快",
						value: 5
					},
					{
						label: "通用排序",
						value: 6
					}
				],
				arr: [1],
				str: "",
				sort: "desc"
			};
		}
	};
</script>