bluestar-TreeSelect

分类选择

引入

在script标签中引入组件

//使用HBuilderX导入插件
import TreeSelect from "@/uni_modules/bluestar-TreeSelect/components/bluestar-TreeSelect/bluestar-TreeSelect.vue"

//使用npm install
import TreeSelect from "bluestar-treeselect/components/bluestar-TreeSelect/bluestar-TreeSelect.vue"

代码演示

<template>
	<view class="test">
		<TreeSelect color="#36D6B6" :left-items="leftItems" :right-items="rightItems" @click-nav="clickNav">
			<!--自定义左侧显示字段名-->
			<template v-slot:left-text="slotProps">
				{{ slotProps.value.text }}
			</template>
			<!--自定义右侧模板-->
			<template v-slot:right="slotProps">
				<view class="card">{{ slotProps.value.text }}</view>
			</template>
		</TreeSelect>
	</view>
</template>

<script setup lang="ts">
import {reactive} from "vue"

const leftItems = reactive([
	{
		text : '左侧选项一',
	},
	{
		text : '左侧选项二',
	},
	{
		text : '左侧选项三',
		disabled : true
	},
])
const rightItems = reactive([
	{
		text : '右侧选项一',
	},
	{
		text : '右侧选项二',
	},
	{
		text : '右侧选项三',
	},
	{
		text : '右侧选项四',
	},
	{
		text : '右侧选项五',
	},
	{
		text : '右侧选项六',
	},
])

const clickNav = (value : any, index : number) => {
	console.log(value)
	console.log(index)
}
</script>

<style lang="scss" scoped>
.card {
	width: 100%;
	height: vw(100);
	border: vw(2) solid #e1e1e1;
	border-radius: vw(10);
	margin: 0 0 vw(20) 0;
}
</style>

API

Props

| 参数 | 说明 | 类型 | 默认值 | |-----------|:---------|:----------|:--------| | left-items | 左侧导航所需数据 | Array | [] | | right-items | 右侧内容所需数据 | Array | [] | | color | 主题色 | string | #0E75FC |

Events

| 事件名称 | 说明 | 回调参数 | | :----- |:--------|----------| | bing:click-nav | 左侧导航点击时，触发的事件 | 选中值,选中索引 |

Slots

| 事件名称 | 说明 | | :----- |:-------------------------| | left-text | 自定义左侧显示字段名 | | right | 自定义右侧模板 |

left-items数据结构

考虑到现有业务范围和接口返回模型，暂未提供子选项children渲染右侧数组。

[
  {
    // 禁用选项
    "disabled": false
  }
]

作者