TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
416
1.7m

极联器 xCascader ​

在线预览
在线模拟尺寸:

介绍 ​

极联选择器，单选模式。

平台兼容 ​

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

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-cascader/x-cascader.uvue

使用 ​

ts

<x-cascader></x-cascader>

Props 属性 ​

名称说明类型默认值
width宽,可以为auto
string'auto'
height高，不可为auto。
string'150'
list数据结构
Array():CASCADER_ITEM_INFO[] => [] as CASCADER_ITEM_INFO[]
modelValue当前选中项的id
string``
fontSize项目文字大小id
string"18"
itemTextColor选项项目未选中的文字颜色
string"#333333"
darkItemTextColor选项项目未选中的暗黑文字颜色，空值是取白色
string""
itemActiveColor选项项目选中的文字颜色，空值取全局主题
string""
sliderContentBgColor内容区域背景颜色
string'rgba(0,0,0,0)'
showCurrentBtn是否在有下级的项目上显示选择本级按钮.
当用户选中了本级时就同选择最后一项一样会触发confirm及同步vmodel值
boolean``

Events 事件 ​

名称参数说明
changeids: String[]选中触发时变化，只要路径变化了就会触发
cellClickitem: CASCADER_TREE_ITEMparentIndex: numberchildrenIndex: number点击项目时触发
confirmid: Stringids: String[]最后一项时触发,或者选择本级时触发
update:modelValueid: String等同v-model,或者选择本级时触发

Slots 插槽 ​

名称说明数据
header顶部头菜单导航插槽,你可以完全写自己的导航样式menus: CASCADER_ITEM_INFO[]

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/cascader

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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">极联器 xCascader</x-text>
			<x-text color="#999999" >极联选择器，单选,暂不支持多选。不支持异步加载数据（后期实现）</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">单选（可无限级）</x-text>
			<x-divider ></x-divider>
			<x-cascader :showCurrentBtn="true" v-model="selecteds1" :list="list" height="200"></x-cascader>
			<x-sheet color="#f5f5f5" dark-color="#333" :margin="['0','16']">
				<x-text color="#999999">选中的值：{{selecteds1}}</x-text>
			</x-sheet>
			<x-button class="mt-32" @click="selecteds1 = '1-4-1'" :block="true">动态赋值</x-button>
		</x-sheet>
		
		

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { CASCADER_ITEM_INFO } from "@/uni_modules/tmx-ui/interface.uts"
	
	const items = [
		{ title: '广东省', id: "199" } as CASCADER_ITEM_INFO,
		{
			title: '江西',
			id: "1-1",
			children: [
				{
					title: '南昌',
					id: "1",
					children: [
						{ title: '青山湖区', id: "1-2" } as CASCADER_ITEM_INFO,
						{ title: '高新区', id: "1-3" } as CASCADER_ITEM_INFO,
						{ title: '红谷滩区', id: "1-4" } as CASCADER_ITEM_INFO,
						{

							title: '东湖区', id: "1-5",

							children: [
								{ title: '三级-青山湖区', id: "1-2-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-高新区', id: "1-3-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-红谷滩区', id: "1-4-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-东湖区', id: "1-5-1" } as CASCADER_ITEM_INFO,
							] as CASCADER_ITEM_INFO[],

						} as CASCADER_ITEM_INFO,
					] as CASCADER_ITEM_INFO[],

				} as CASCADER_ITEM_INFO,
				{ title: '九江', id: "2" } as CASCADER_ITEM_INFO,
				{ title: '赣州', id: "8", disabled: true } as CASCADER_ITEM_INFO,
				{ title: '吉安', id: "9" } as CASCADER_ITEM_INFO,
				{ title: '抚州', id: "10" } as CASCADER_ITEM_INFO,
			] as CASCADER_ITEM_INFO[],
		} as CASCADER_ITEM_INFO,
		{
			title: '江苏',
			id: "4-1",
			children: [
				{ title: '常熟', id: "4" } as CASCADER_ITEM_INFO,
				{ title: '苏州', id: "5" } as CASCADER_ITEM_INFO,
				{ title: '小上海', id: "6" } as CASCADER_ITEM_INFO,
			] as CASCADER_ITEM_INFO[],
		} as CASCADER_ITEM_INFO,
		{ title: '安徽(被禁用)', disabled: true, id: "7" } as CASCADER_ITEM_INFO,
		{ title: '湖南', id: "99" } as CASCADER_ITEM_INFO,
	] as CASCADER_ITEM_INFO[];
	
	const list = ref<CASCADER_ITEM_INFO[]>(items)
	const selecteds1 = ref("")
	const selecteds = ref<string[]>([])
	
	onMounted(() => {
		
	})
</script>

<style lang="scss">

</style>
最近更新