tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
457
1.9m

下拉菜单子组件 xDropdownItem ​

预览

介绍 ​

注意只能放置在父组件x-dropdown-menu中

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-dropdown-item/x-dropdown-item.uvue

使用 ​

ts

<x-dropdown-item></x-dropdown-item>

Props 属性 ​

名称说明类型默认值
title菜单标题
string"标题"
keyName标识，变换或者点击时，会通过事件传回。
string""
icon未选中时的图标
string"arrow-down-s-fill"
activeIcon激活时的图标
string"arrow-up-s-fill"
fontColor默认的文字及图标颜色
string"#333333"
darkFontColor暗黑时的默认的文字及图标颜色，
空取时白色
string""
fontSize文字及图标大小
string"16"
activeFontColor激活的文字及图标颜色
空值时取全局统一的主题色。
string""
isBtn是否是按钮选项。
booleanfalse
color内容背景颜色
string"white"
darkColor暗黑时的内容背景颜色,空值取sheetDarkColor
string""
render渲染,如果设置为true,内部使用vif切换渲染
注意它不会影响其它菜单只影响本菜单.vif切换会导致内容重绘,但
可以解决sdk的一些异常组件嵌套的问题.
当您嵌套的组件在此内出现异常,闪退,报错时请设置为true,否则不用理会本属性
本属性存在就是为了绕开sdk bug.
booleanfalse

Events 事件 ​

名称参数说明

Slots 插槽 ​

名称说明数据
default默认插槽，弹层内容。-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/fankui/dropdown-menu

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">下拉菜单 dropdownMenu</x-text>
			<x-text color="#999999" >
				提供static和fiexd两种位置方式。内容完全通过插槽自由布局。x-dropdown-menu 中的render="true"后动画会消失
			</x-text>
		</x-sheet>
		<x-dropdown-menu @change="onchange" v-model="activeIndex">
			<x-dropdown-item  title="按销量" key-name="xiaoliang">
				<x-text class="mb-32">因自由度非常高，你可以自由布局最大高度是否滚动内容。</x-text>
				<!-- -1表示关闭 -->
				<x-button @click="activeIndex=-1" :block="true">关闭</x-button>
			</x-dropdown-item>
			<x-dropdown-item :title="menus" key-name="wiff">
				<x-text>自己添加scrollview等实现页脚功能.</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="硬盘容量" key-name="yingpan">
				<x-text>内容层的高度是自动高。不需要额外设置。</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="综合" key-name="zhonghe" :isBtn="true" icon="sort-desc" active-icon="sort-asc">
				<x-text>内容层的高度是自动高。不需要额外设置。</x-text>
			</x-dropdown-item>
		</x-dropdown-menu>


		<x-sheet :margin="['0','24']">
			<x-text font-size="18" class=" text-weight-b ">正文是静态，弹出时，菜单不会置顶在页面顶部。</x-text>
		</x-sheet>

		<x-dropdown-menu position="static">
			<x-dropdown-item title="按距离">
				<x-text>这里由用户自由布局内容，实现逻辑。</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="综合条件">
				<x-text>你还可以实现更多更复杂的功能.</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="所有项目">
				<x-text>完全插槽实现灵活度极高。</x-text>
			</x-dropdown-item>
		</x-dropdown-menu>

	<view style="height:580px"></view>

</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const activeIndex = ref(-1)
	const remove = ref(true)
	const menus = ref("网络类型")
	
	const onchange = (index : number, keyName : string, status : boolean) => {
		console.log('当前索引：', index, ';当前项目标识：', keyName, ';当前开关状态：', status)
	}
</script>

<style lang="scss">

</style>
最近更新