示例仅供参考,请以真机为主

FilterBar 过滤栏

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

cl-filter-bar

参数

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

事件

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

cl-filter-item

参数

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

事件

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

插槽

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

示例

基本用法

type 有效值:

  • order 排序 "desc" / "asc" / ""
  • switch 开关 true / false
  • dropdown 展开项
<template>
	<cl-page :padding="20">
		<cl-card label="基础用法">
			<cl-filter-bar v-model="filter">
				<cl-filter-item label="排序" prop="order" type="order"></cl-filter-item>
				<cl-filter-item label="开关" prop="switch" type="switch"></cl-filter-item>
			</cl-filter-bar>
		</cl-card>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	const filter = ref<any>({
		order: "",
		switch: ""
	});
</script>

展开项

配置 type="dropdown", options 为数据列表

<template>
	<cl-page :padding="20">
		<cl-card label="展开项">
			<cl-filter-bar v-model="filter">
				<cl-filter-item
					label="多选"
					prop="d1"
					type="dropdown"
					multiple
					:options="[
						{
							label: 'A',
							value: 1,
						},
						{
							label: 'B',
							value: 2,
						},
					]"
				></cl-filter-item>
				<cl-filter-item
					label="单选"
					prop="d2"
					type="dropdown"
					:options="[
						{
							label: 'A',
							value: 1,
						},
						{
							label: 'B',
							value: 2,
						},
					]"
				></cl-filter-item>
			</cl-filter-bar>
		</cl-card>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	const filter = ref<any>({
		d1: [],
		d2: ""
	});
</script>

自定义

需添加 @tap.stop ,否则点击会自动关闭弹窗

<template>
	<cl-page :padding="20">
		<cl-card label="展开项">
			<cl-filter-bar v-model="filter">
				<template #dropdown>
					<view class="cs" @tap.stop>
						<cl-input></cl-input>
					</view>
				</template>
			</cl-filter-bar>
		</cl-card>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	const filter = ref<any>({
		d1: [],
		d2: ""
	});
</script>
Last Updated: