侧边分类 xSliderTree

---

在线预览

在线模拟尺寸:

介绍

侧边分类选择，可多选，单选模式。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

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

使用

<x-slider-tree></x-slider-tree>

Props 属性

名称	说明	类型	默认值
width	宽	string	"auto"
height	高是必填，不可为auto。	string	"100%"
activeTextColor	侧边选中的文字颜色，空值取全局主题	string	""
textColor	侧边未选中时的文字颜色	string	"#888888"
itemTextColor	选项项目未选中的文字颜色	string	"#333333"
itemActiveColor	选项项目选中的文字颜色，空值取全局主题	string	""
sliderBgColor	左侧边栏背景颜色	string	"#f5f5f5"
darkSliderBgColor	左侧边栏暗黑背景颜色 如果不提供，自动读取全局的backgroundColorContentDark背景色	string	""
sliderContentBgColor	右内容区域背景颜色	string	"white"
darkSliderContentBgColor	右内容区域暗黑背景颜色 如果不提供读取sheet窗口的暗黑背景	string	""
sliderWidth	侧边栏宽	string	"100"
list	数据列表	Array	[] as SLIDER_TREE_ITEM_INFO[]
modelValue	当前选中项的id数组	Array	[] as string[]
multiple	每级是否允许多选	boolean	false
fontSize	文字大小	string	"16"

Events 事件

名称	参数	说明
change	ids: string[]	选中变换时触发
update:modelValue	-	等同v-model:modelValue

Slots 插槽

名称	说明	数据
default	-	-

Ref 方法

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

示例文件路径

/pages/daohang/slider-tree

示例源码

uvue

<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">侧边分类 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="['1-3']" 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 as string[])" :multiple="true" height="280px"
				:list="list"></x-slider-tree>
			<x-button class="mt-24" @click="selecteds = ['1-3-1','10']" :block="true">动态赋值</x-button>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

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

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

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

						} as SLIDER_TREE_ITEM_INFO,
					] as SLIDER_TREE_ITEM_INFO[],

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

<style lang="scss">

</style>