Skip to content
On this page

组件库文档 tmui.design

下拉筛选器 FilterMenu

本组件提供了基本逻辑框和动效,不集成任何数据逻辑,由使用者自行处理.
提醒各位:如果不开启fixed功能属性静态放置时,下拉错位,多半是你们用电脑浏览器模拟器的移动端,用鼠标滚动的。 事实上我作了页面禁止滚动,手机上是滑动不了的,因此也不会出现下拉错位问题。如果你很在意要兼容电脑版本,那就开启fixed属性。

FilterMenu中必须放入FilterMenu-item才会生效.


🌶️ 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<view class="pa-24">
			<tm-text :label="'展开第一个菜单,自动吸到到顶部并滚动屏幕后跟随页面滚动(需要把本组件放到fiexd或者tmSticky组件内才可实现跟随屏幕滚动)。下面第二个筛选菜单为静态展示,不跟随页面滚动'"></tm-text>
		</view>

		<tm-sticky :offset="stop">
			<template v-slot:sticky>

				<tm-filterMenu :fixed="true">
					<tm-filterMenu-item icon="tmicon-filter-fill" un-icon="tmicon-filter" :height="450" title="筛选">
						<tm-text :font-size="24" _class="font-weight-b"
							label="为了针对性的数据结构体设计问题.本下拉菜单过滤器,不提供数据结构,也不处理数据,全交由用户自行处理,我只处理动效."></tm-text>
					</tm-filterMenu-item>
					<tm-filterMenu-item title="价格排序">
						<tm-text :font-size="24" _class="font-weight-b" label="数据由用户处理"></tm-text>
					</tm-filterMenu-item>
					<tm-filterMenu-item :height="650" title="更多" un-icon="tmicon-stepmode" icon="tmicon-menu">
						<tm-text :font-size="24" _class="font-weight-b" label="数据由用户处理"></tm-text>
					</tm-filterMenu-item>
					<tm-filterMenu-item isButton title="价格排序" un-icon="tmicon-sort" icon="tmicon-sort">
					</tm-filterMenu-item>
				</tm-filterMenu>
			</template>
			<view style="height:2000px">
				<tm-sheet :margin="[0, 24]">
					<tm-text :fontSize="24" _class="font-weight-b" label="下面是一个静态的示例."></tm-text>
				</tm-sheet>
				<tm-filterMenu ref="filter">
					<tm-filterMenu-item :footerHeight="100" icon="tmicon-filter-fill" un-icon="tmicon-filter" :height="450" title="多选项">
						<tm-checkbox-group direction='customCol' v-model="checbox" :default-value="checbox">
							<tm-checkbox :value="item.id" v-for="(item, index) in checboxList" :key="index"
								:custom="false">
								<template v-slot:default="{ checked }">
									<view :userInteractionEnabled="false" hover-class="opactiy-7"
										class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
										<tm-text :color="checked.checked ? 'primary' : ''" :label="item.text"></tm-text>
										<tm-icon :font-size="24" color="primary" v-if="checked.checked"
											name="tmicon-check"></tm-icon>
									</view>
								</template>
							</tm-checkbox>
						</tm-checkbox-group>
						<template v-slot:footer>
							<view class="flex flex-row flex-row-between ">
								<view class="pl-24 pr-12 flex-1">
									<tm-button @click="filter.close()" :shadow="0" text :outlined="true" block
										label="取消"></tm-button>
								</view>
								<view class="pr-24 pl-12 flex-1">
									<tm-button @click="filter.close()" block :border="1" label="确认"></tm-button>
								</view>
							</view>
						</template>
					</tm-filterMenu-item>
					<tm-filterMenu-item :footerHeight="100" title="单选项">
						<tm-radio-group direction='customCol' v-model="radiobox" :default-value="radiobox">
							<tm-radio :value="item.id" v-for="(item, index) in radioList3" :key="index" :custom="false">
								<template v-slot:default="{ checked }">
									<view :userInteractionEnabled="false" hover-class="opactiy-7"
										class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
										<tm-text :color="checked.checked ? 'primary' : ''" :label="item.text"></tm-text>
										<tm-icon :font-size="24" color="primary" v-if="checked.checked"
											name="tmicon-check"></tm-icon>
									</view>
								</template>
							</tm-radio>
						</tm-radio-group>
						<template v-slot:footer>
							<view class="flex flex-row flex-row-between ">
								<view class="pl-24 pr-12 flex-1">
									<tm-button @click="filter.close()" :shadow="0" text :outlined="true" block
										label="取消"></tm-button>
								</view>
								<view class="pr-24 pl-12 flex-1">
									<tm-button @click="filter.close()" block :border="1" label="确认"></tm-button>
								</view>
							</view>
						</template>
					</tm-filterMenu-item>
					<tm-filterMenu-item :footerHeight="100" :height="650" title="杂类选项" un-icon="tmicon-stepmode" icon="tmicon-menu">
						<tm-text :font-size="28" _class="font-weight-b" label="可以随便放自己想要的组件作为过滤"></tm-text>
						<tm-divider></tm-divider>
						<tm-text :font-size="32" _class="font-weight-b py-24" label="输入框"></tm-text>
						<tm-input v-model="inputValue"></tm-input>
						<tm-text :font-size="32" _class="font-weight-b py-24" label="tag选项"></tm-text>
						<tm-checkbox-group v-model="checbox2" :default-value="checbox2">
							<tm-checkbox :value="item.id" v-for="(item, index) in checboxList2" :key="index"
								:custom="false">
								<template v-slot:default="{ checked }">
									<tm-tag :userInteractionEnabled="false" :label="item.text" :border="1" :shadow="0"
										:text="!checked.checked"></tm-tag>
								</template>
							</tm-checkbox>
						</tm-checkbox-group>
						<template v-slot:footer>
							<view class="flex flex-row flex-row-between ">
								<view class="pl-24 pr-12 flex-1">
									<tm-button @click="filter.close()" :shadow="0" text :outlined="true" block
										label="取消"></tm-button>
								</view>
								<view class="pr-24 pl-12 flex-1">
									<tm-button @click="filter.close()" block :border="1" label="确认"></tm-button>
								</view>
							</view>
						</template>
					</tm-filterMenu-item>
					<tm-filterMenu-item isButton title="按钮选项" un-icon="tmicon-ios-radio-button-off"
						icon="tmicon-ios-radio-button-on">
					</tm-filterMenu-item>
				</tm-filterMenu>
			</view>
		</tm-sticky>



	</tm-app>
</template>
<script lang="ts" setup>
import { ref, Ref, getCurrentInstance } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmFilterMenu from "@/tmui/components/tm-filterMenu/tm-filterMenu.vue"
import tmFilterMenuItem from "@/tmui/components/tm-filterMenu-item/tm-filterMenu-item.vue"
import tmCheckboxGroup from "@/tmui/components/tm-checkbox-group/tm-checkbox-group.vue"
import tmCheckbox from "@/tmui/components/tm-checkbox/tm-checkbox.vue"
import tmIcon from "@/tmui/components/tm-icon/tm-icon.vue"
import tmRadioGroup from "@/tmui/components/tm-radio-group/tm-radio-group.vue"
import tmRadio from "@/tmui/components/tm-radio/tm-radio.vue"
import tmInput from "@/tmui/components/tm-input/tm-input.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmTag from "@/tmui/components/tm-tag/tm-tag.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import tmSticky from "@/tmui/components/tm-sticky/tm-sticky.vue"
const filter = ref<InstanceType<typeof tmFilterMenu | null>>(null)
const checbox: Ref<Array<string | number>> = ref([])
const checbox2: Ref<Array<string | number>> = ref([])
const radiobox: Ref<string | number> = ref('')
const inputValue = ref("")
let stop = ref(0)
// #ifdef H5
stop.value = uni.$tm.u.torpx(44)
// #endif

const checboxList = ref([
	{ text: "测试项目1-1", id: '1' },
	{ text: "测试项目2-1", id: '2' },
	{ text: "测试项目3-1", id: '3' },
	{ text: "测试项目4-1", id: '4' },
	{ text: "测试项目5-1", id: '5' },
])
const checboxList2 = ref([
	{ text: "哈哈1", id: '1' },
	{ text: "哈哈2-1", id: '2' },
	{ text: "哈哈3-1", id: '3' },
	{ text: "哈哈4-1", id: '4' },
	{ text: "哈哈5-1", id: '5' },
])
const radioList3 = ref([
	{ text: "radio1", id: '1' },
	{ text: "radio12-1", id: '2' },
	{ text: "radio13-1", id: '3' },
	{ text: "radio14-1", id: '4' },
	{ text: "radio15-1", id: '5' },
])

</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 FilterMenu 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
widthNumber750
heightNumber70
colorString'white'背景主题颜色
activeColorString'primary'选中时的颜色
modelValueNumberNaN打开时的索引,NaN时即关闭可双向绑定v-model="xx"
fixedBooleanfalse是否开启悬浮
fixed的解释
开启后内容,展开会自动吸附到顶部,解决把此组件用到悬浮或者sticky中时,内容需要跟随页面置顶展示内容。关闭时,适合静态展示,展开后菜单不会吸顶。

🌹 FilterMenu 事件

事件名参数返回数据描述
@clickitem,index返回索引数据和项目数据导致菜单单击时触发
@close--关闭选项时触发
@onButtonboolean,index返回当前选中状态,以及当前的索引值当菜单为按钮时,点击click是会同时触发此事件.
@confirmindex当前的索引值当在tm-filter-menu-item中放入tm-buttom时,form-type属性为filterConfirm时,按钮被点击时会触发此事件
@cancelindex当前的索引值当在tm-filter-menu-item中放入tm-buttom时,form-type属性为filterCancel时,按钮被点击时会触发此事件

🌽 slot FilterMenu插槽

属性名称类型数据说明

🥗 ref FilterMenu方法

close,关闭当前选项菜单.

🥗 FilterMenu-item 属性

参数名类型默认值描述
heightNumber500本选项页面展开的高度
titlestring''选项菜单
iconstring'tmicon-angle-up'选中时的图标
unIconstring'tmicon-angle-down'没有选中时的图标
unitstring'rpx'单位可选rpx,px
fontSizeNumber28菜单文字大小
fontColorstring'primary'选中时的文本颜色
unFontColorstring'black'没有选中时的文本颜色
isButtonbooleanfalse是否当作按钮使用,点击时,只触发事件,不展开相关内容的动作
bgColorstring'white'当前选项页的背景色

🌽 slot FilterMenu-item插槽

属性名称类型数据说明
default自定内容