TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
405
1.7m

极联器 xCascader ​

在线预览
在线模拟尺寸:

介绍 ​

极联选择器，单选模式。

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️☑️☑️4.44+1.1.9

文件路径 ​

ts

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

使用 ​

ts

<x-cascader></x-cascader>

Props 属性 ​

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

Events 事件 ​

名称参数说明
change**ids** : String[]选中触发时变化，只要路径变化了就会触发
cellClick**item** : CASCADER_TREE_ITEM**parentIndex** : number**childrenIndex** : number点击项目时触发
confirm**id** : String**ids** : String[]最后一项时触发,或者选择本级时触发
update:modelValue**id** : 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>
	import { CASCADER_ITEM_INFO } from "@/uni_modules/tmx-ui/interface.uts"
	export default {
		data() {
			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[];
			return {
				list: items,
				selecteds1: "",
				selecteds: [] as string[]
			};
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss">

</style>
最近更新