TMUI 3.1.1
键入关键记事 K

Appearance

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="text-weight-b"
							label="为了针对性的数据结构体设计问题.本下拉菜单过滤器,不提供数据结构,也不处理数据,全交由用户自行处理,我只处理动效."
						></tm-text>
					</tm-filterMenu-item>
					<tm-filterMenu-item title="价格排序">
						<tm-text :font-size="24" _class="text-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="text-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="text-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 }" class="flex-1">
									<view
										:userInteractionEnabled="false"
										hover-class="opactiy-7"
										class="flex-1 flex-row flex flex-row-center-between"
										style="height: 76rpx;width:100%"
									>
										<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="text-weight-b" label="可以随便放自己想要的组件作为过滤"></tm-text>
						<tm-divider></tm-divider>
						<tm-text :font-size="32" _class="text-weight-b py-24" label="输入框"></tm-text>
						<tm-input v-model="inputValue"></tm-input>
						<tm-text :font-size="32" _class="text-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'当前选项页的背景色
uuidstring,number''自定义标识，可通过click中的item获得

🌽 slot FilterMenu-item插槽 ​

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