级联 Cascade

用于联动选择。

使用

API

安装使用

import { TiCascade } from '@titian-design/mobile-vue';

用法示例

静态数据

弹出选择器

codesanbox

copy

code

<template>
  <TiButton @click="toggleVisible(true)">弹出选择器</TiButton>
  <TiPopup :visible="visible" closeOnMask @close="toggleVisible(false)" position="bottom">
    <TiCascade v-if="visible" code="code" label="name" cascade="children" :tabs="tabs" :options="options" />
  </TiPopup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiButton, TiPopup, TiCascade } from 'titian-h5-vue';

const visible = ref(false);
const tabs = ref(['省', '市', '区/县']);
const options = ref([
  {
    code: '310000',
    name: '上海市',
    children: [
      {
        code: '310100',
        name: '直辖市',
        children: [
          {
            code: '310101',
            name: '黄浦区',
          },
        ],
      },
    ],
  },
  {
    code: '330000',
    name: '浙江省',
    children: [
      {
        code: '330100',
        name: '杭州市',
        children: [
          {
            code: '330102',
            name: '上城区',
          },
          {
            code: '330105',
            name: '拱墅区',
          },
        ],
      },
    ],
  },
]);
const toggleVisible = (value: boolean) => {
  visible.value = value;
};
</script>

动态数据

备注

给 getOptions 属性传入一个异步接口，有 3 种做法：

1. 该接口返回全部层级的数据。
2. 该接口可以返回单层数据；选择时，会再次调用该接口，获取下一层级数据。
3. 该接口可以搭配静态 options 数据；当在 options 内找不到下一层数据时，会尝试调用 getOptions 接口，拿到下一层级数据。

<template>
  <TiCascade :get-options="asyncGetOptionAPI"/>
</template>

<script lang="ts" setup>
import { TiCascade } from '@titian-design/mobile-vue';
  
const asyncGetOptionAPI = async (value: any) => {
    let rawResponse;
    if (value) {
      rawResponse = await fetch('api3/address/tmp/getAreasByCityId', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ areaCode: value.areaCode }),
      });
    } else {
      rawResponse = await fetch('api3/address/tmp/getProvinceCity', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({}),
      });
    }
    const { data } = await rawResponse.json();
    return data;
};
</script>

TiCascade API

属性 Properties

名称	类型	必填	默认值	说明	备注
titlebar	boolean	否	true		-
title	string	否	'选择地址'	标题	-
sub-title	string	否	-	副标题	-
code	string	否	'code'	列标识	-
label	string	否	'label'	文案字段	-
value	array	否	[]	结果	-
options	{ [key: string | number]: unknown }[]	否	[]	数据源	-
active	number	否	0	当前展示项	-
get-options	function	否	-	获取列数据	-
cascade	string	否	children	级联字段	-
ext-header-style	string | Record<string, string>	否		header 样式	-
ext-tab-style	string | Record<string, string>	否		tab 样式	-
ext-option-item-style	string | Record<string, string>	否		当前项样式	-

事件 Events

名称	参数列表	描述	备注
change	e: CustomEvent<{ value: unknown[]; options: CascadeOption[];active: number;}> => void	当前选中项，见 级联项 CascadeOption	-
changeSwiper	`e: CustomEvent<{ current: number; source: 'touch'	'';}> => void`	切换当前活动项目
close		关闭	-

CSS 变量 CSS Variable

变量	默认值	说明
--cascade-header-padding-v	theme.spacing.vertical.v0	header 垂直方向的内边距
--cascade-header-padding-h	theme.spacing.horizontal.h3	header 水平方向的内边距
--cascade-tab-padding-v	theme.spacing.vertical.v7	tab 垂直方向的内边距
--cascade-tab-padding-h	theme.spacing.horizontal.h7	tab 水平方向的内边距
--cascade-tab-font-size	theme.fontSize.t6	tab 字体大小
--cascade-tab-color	theme.color.gray.texticon.250	tab 字体颜色
--cascade-tab-line-height	theme.lineHeight.multiline.t2	tab 文字行高
--cascade-tab-selected-color	theme.color.gray.texticon.550	tab 选中字体颜色
--cascade-tab-active-color	theme.color.gray.texticon.900	tab 活动状态字体颜色
--cascade-tab-active-font-weight	theme.fontWeight.semibold	tab 活动状态字体 weight
--cascade-content-height	750rpx	内容区高度
--cascade-item-padding-v	theme.spacing.vertical.v8	内容区单项垂直方向的内边距
--cascade-item-padding-h	theme.spacing.horizontal.h10	内容区单项水平方向的内边距
--cascade-item-font-size	theme.fontSize.t6	内容区单项字体大小
--cascade-item-font-weight	theme.fontWeight.regular	内容区单项字体 weight
--cascade-item-color	theme.color.gray.texticon.900	内容区单项字体颜色
--cascade-item-checkbox-checked-color	theme.color.brand.1000	每一个具体地址选项，选中后右侧对勾颜色

数据结构 Data Structure

级联项 CascadeOption

type CascadeOption = { [key: string | number]: unknown }