Vant3 中文入门教程 Vant3 TreeSelect 分类选择

2024-02-25 开发教程 Vant3 中文入门教程 匿名 5

介绍

用于从一组相关联的数据集合中进行选择。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { TreeSelect } from 'vant';
const app = createApp();
app.use(TreeSelect);

代码演示

单选模式

item 为分类显示所需的数据,数据格式见下方示例。main-active-index 表示左侧高亮选项的索引,active-id 表示右侧高亮选项的 id。

<van-tree-select
v-model:active-id="state.activeId"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
activeId: 1,
activeIndex: 0,
});
const items = [
{
text: '浙江',
children: [
{ text: '杭州', id: 1 },
{ text: '温州', id: 2 },
],
},
{
text: '江苏',
children: [
{ text: '南京', id: 5 },
{ text: '无锡', id: 6 },
],
},
];
return {
state,
items,
};
},
};

多选模式

active-id 为数组格式时,可以选中多个右侧选项。

<van-tree-select
v-model:active-id="state.activeIds"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
activeId: [1, 2],
activeIndex: 0,
});
const items = [
{
text: '浙江',
children: [
{ text: '杭州', id: 1 },
{ text: '温州', id: 2 },
],
},
{
text: '江苏',
children: [
{ text: '南京', id: 5 },
{ text: '无锡', id: 6 },
],
},
];
return {
state,
items,
};
},
};

自定义内容

通过 content 插槽可以自定义右侧区域的内容。

<van-tree-select
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
>
<template #content>
<van-image
v-if="activeIndex === 0"
src="https://img.yzcdn.cn/vant/apple-1.jpg" rel="external nofollow"
/>
<van-image
v-if="activeIndex === 1"
src="https://img.yzcdn.cn/vant/apple-2.jpg" rel="external nofollow"
/>
</template>
</van-tree-select>
import { ref } from 'vue';
export default {
setup() {
const activeIndex = ref(0);
return {
activeIndex,
items: [{ text: '分组 1' }, { text: '分组 2' }],
};
},
};

徽标提示

设置 dot 属性后,会在图标右上角展示一个小红点;设置 badge 属性后,会在图标右上角展示相应的徽标。

<van-tree-select
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
/>
import { ref } from 'vue';
export default {
setup() {
const activeIndex = ref(0);
return {
activeIndex,
items: [
{ text: '浙江', children: [], dot: true },
{ text: '江苏', children: [], badge: 5 },
],
};
},
};

API

Props

参数说明类型默认值
items分类显示所需的数据

Item[]

[]

height

高度,默认单位为px

number | string

300

main-active-index左侧选中项的索引

number | string

0

active-id右侧选中项的 id,支持传入数组

number | string |
(number | string)[]

0

max右侧项最大选中个数

number | string

Infinity

selected-icon自定义右侧栏选中状态的图标

string

success

Events

事件名说明回调参数
click-nav点击左侧导航时触发index:被点击的导航的索引
click-item点击右侧选择项时触发data: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容

Item 数据结构

items 整体为一个数组,数组内包含一系列描述分类的对象,每个分类里,text表示当前分类的名称,children表示分类里的可选项。

[
{
// 导航名称
text: '所有城市',
// 导航名称右上角徽标
badge: 3,
// 是否在导航名称右上角显示小红点
dot: true,
// 导航节点额外类名
className: 'my-class',
// 该导航下所有的可选项
children: [
{
// 名称
text: '温州',
// id,作为匹配选中状态的标识符
id: 1,
// 禁用选项
disabled: true,
},
{
text: '杭州',
id: 2,
},
],
},
];

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-tree-select-font-size

var(--van-font-size-md)

-
--van-tree-select-nav-background-color

var(--van-background-color)

-
--van-tree-select-content-background-color

var(--van-white)

-
--van-tree-select-nav-item-padding

14px var(--van-padding-sm)

-
--van-tree-select-item-height

48px

-
--van-tree-select-item-active-color

var(--van-danger-color)

-
--van-tree-select-item-disabled-color

var(--van-gray-5)

-
--van-tree-select-item-selected-size

16px

-