tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
325
1.4m

侧边分类子节点 xSliderTreeChildren ​

预览

介绍 ​

xSliderTree内部子组件，不可引用

平台兼容 ​

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

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-slider-children/x-slider-children.uvue

使用 ​

ts

<x-slider-children></x-slider-children>

Props 属性 ​

名称说明类型默认值
itemTextColor选项项目未选中的文字颜色
string"#333333"
itemActiveColor选项项目选中的文字颜色，空值取全局主题
string""
sliderContentBgColor右内容区域背景颜色
string"white"
list数据列表
Array() : SLIDER_TREE_ITEM[] => []
modelValue当前选中项的id数组
Array() : string[] => []
multiple是否允许多选
booleanfalse
index当前的索引
number0
nowSelecteds父级选中的项。
Array() : string[] => []
height高度
string'100%'
boxHeight容器高度
number0
fontSize文字大小
string"16"

Events 事件 ​

名称参数说明
back-返回上级
itemClickids: string[]type: string项目点击事件

Slots 插槽 ​

名称说明数据
default内部节点插槽，不对外-

Ref 方法 ​

名称参数返回值说明
getSelected--获取当前选中的项 *
setSelected--设置选中的项 *

示例文件路径 ​

json

/pages/daohang/slider-tree

示例源码 ​

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">侧边分类 xSliderTree</x-text>
			<x-text color="#999999">侧边分类选择，可多选，单选模式。数据项可自行挂额外字段。</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">单选（可无限级）</x-text>
			<x-divider class="my-24"></x-divider>
			<x-slider-tree :model-value="['ah-hf-ss']" height="280" :list="list"></x-slider-tree>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">多选（可无限级）</x-text>
			<x-divider class="my-24"></x-divider>
			<x-slider-tree v-model="selecteds" :multiple="true" height="280px"
				:list="list"></x-slider-tree>
			<x-button class="mt-24" @click="selecteds = ['gd-sz-ns-yh','js-sz']" :block="true">动态赋值</x-button>
		</x-sheet>
	
</template>

<script setup lang="ts">
	import type { SLIDER_TREE_ITEM_INFO } from "@/uni_modules/tmx-ui"
	const list = ref<SLIDER_TREE_ITEM_INFO[]>([
		{
			title: '安徽',
			id: "ah",
			code: 'AH',
			extra: 1,
			children: [
				{
					title: '合肥',
					id: "ah-hf",
					children: [
						{ title: '蜀山区', id: "ah-hf-ss" },
						{ title: '包河区', id: "ah-hf-bh" },
						{ title: '瑶海区', id: "ah-hf-yh" }
					]
				},
				{
					title: '芜湖',
					id: "ah-wh",
					children: [
						{ title: '镜湖区', id: "ah-wh-jh" },
						{ title: '弋江区', id: "ah-wh-yj" }
					]
				},
				{ title: '蚌埠', id: "ah-bb" },
				{ title: '淮南', id: "ah-hn" },
				{ title: '马鞍山', id: "ah-mas" },
				{ title: '淮北', id: "ah-hb" },
				{ title: '铜陵', id: "ah-tl" },
				{ title: '安庆', id: "ah-aq" },
				{ title: '黄山', id: "ah-hs" },
				{ title: '滁州', id: "ah-cz" },
				{ title: '阜阳', id: "ah-fy" },
				{ title: '宿州', id: "ah-sz" },
				{ title: '六安', id: "ah-la" },
				{ title: '亳州', id: "ah-bz" },
				{ title: '池州', id: "ah-chz" },
				{ title: '宣城', id: "ah-xc" }
			]
		},
		{
			title: '江苏',
			id: "js",
			children: [
				{ title: '南京', id: "js-nj" },
				{ title: '苏州', id: "js-sz" },
				{ title: '无锡', id: "js-wx" },
				{ title: '常州', id: "js-cz" },
				{ title: '南通', id: "js-nt" },
				{ title: '扬州', id: "js-yz" },
				{ title: '镇江', id: "js-zj" },
				{ title: '泰州', id: "js-tz" },
				{ title: '盐城', id: "js-yc" },
				{ title: '淮安', id: "js-ha" },
				{ title: '连云港', id: "js-lyg" },
				{ title: '宿迁', id: "js-sq" },
				{ title: '徐州', id: "js-xz" }
			]
		},
		{ title: '湖南', id: "hn" },
		{
			title: '广东',
			id: "gd",
			children: [
				{
					title: '广州',
					id: "gd-gz",
					children: [
						{
							title: '天河区',
							id: "gd-gz-th",
							children: [
								{ title: '五山街道', id: "gd-gz-th-ws" },
								{ title: '猎德街道', id: "gd-gz-th-ld" },
								{ title: '冼村街道', id: "gd-gz-th-xc" }
							]
						},
						{ title: '越秀区', id: "gd-gz-yx" },
						{ title: '海珠区', id: "gd-gz-hz" }
					]
				},
				{
					title: '深圳',
					id: "gd-sz",
					children: [
						{
							title: '南山区',
							id: "gd-sz-ns",
							children: [
								{ title: '粤海街道', id: "gd-sz-ns-yh" },
								{ title: '西丽街道', id: "gd-sz-ns-xl" }
							]
						},
						{ title: '福田区', id: "gd-sz-ft" }
					]
				},
				{ title: '珠海', id: "gd-zh" },
				{ title: '佛山', id: "gd-fs" },
				{ title: '东莞', id: "gd-dg" },
				{ title: '中山', id: "gd-zs" },
				{ title: '惠州', id: "gd-hz" },
				{ title: '江门', id: "gd-jm" },
				{ title: '湛江', id: "gd-zj" },
				{ title: '茂名', id: "gd-mm" },
				{ title: '韶关', id: "gd-sg" },
				{ title: '汕头', id: "gd-st" }
			]
		},
		{ title: '浙江', id: "zj" },
		{ title: '四川', id: "sc" },
		{ title: '湖北', id: "hb" },
		{ title: '河南', id: "hen" },
		{ title: '山东', id: "sd" },
		{ title: '福建', id: "fj" },
		{ title: '陕西', id: "sn" },
		{ title: '山西', id: "sx" },
		{ title: '河北', id: "heb" },
		{ title: '辽宁', id: "ln" },
		{ title: '江西', id: "jx" },
		{ title: '云南', id: "yn" },
		{ title: '广西', id: "gx" }
	])
	const selecteds = ref<string[]>([])
</script>

<style lang="scss">

</style>
最近更新