下拉菜单 DropdownMenu

下拉菜单是可切换的上下文叠加，用于显示链接列表等, 可以支持多种类型的下拉菜单。

使用

API

安装使用

import { TiDropdownMenu, TiDropdownItem } from '@titian-design/mobile-vue';

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiDropdownMenu>
    <TiDropdownItem visible title="默认展开" :options="dropMenuOptions" />
    <TiDropdownItem title="标题" :options="dropMenuOptions" />
    <TiDropdownItem title="自定义内容">
      <div>自定义内容</div>
    </TiDropdownItem>
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);
</script>

设置选中值

codesanbox

copy

code

<template>
  <TiDropdownMenu>
    <TiDropdownItem :value="['1']" title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);
</script>

submit 模式

codesanbox

copy

code

<template>
  <TiDropdownMenu>
    <TiDropdownItem hasSubmit submitText="确定" title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);
</script>

主动控制

codesanbox

copy

code

<template>
  <TiButton @click="handleClick"> 主动控制 </TiButton>
  <TiDropdownMenu>
    <TiDropdownItem title="默认展开" :options="dropMenuOptions" />
    <TiDropdownItem title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);

const wrap = ref();

const handleClick = () => {
  wrap.value?.$el.toggle();
};
</script>

方向向上

codesanbox

copy

code

<template>
  <TiDropdownMenu direction="up">
    <TiDropdownItem title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);
</script>

禁用点击

codesanbox

copy

code

<template>
  <TiDropdownMenu>
    <TiDropdownItem disabled title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);
</script>

事件操作

codesanbox

copy

code

<template>
  <TiDropdownMenu>
    <TiDropdownItem
      @close="handleClose"
      @open="handleOpen"
      @change="handleChange"
      title="默认展开"
      :options="dropMenuOptions"
    />
    <TiDropdownItem title="标题1" :options="dropMenuOptions" />
    <TiDropdownItem title="标题2" :options="dropMenuOptions" />
  </TiDropdownMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiDropdownItemProps, TiDropdownItem, TiDropdownMenu } from 'titian-h5-vue';

const dropMenuOptions = ref<TiDropdownItemProps['options']>([
  { title: '选项1', value: '1' },
  { title: '选项2', value: '2' },
]);

const handleClose = (e: CustomEvent<never>) => {
  console.log(e.detail);
};

const handleOpen = (e: CustomEvent<never>) => {
  console.log(e.detail);
};

const handleChange = (e: CustomEvent<string | number | Array<string | number>>) => {
  console.log(e.detail);
};
</script>

TiDropdownMenu API

属性 Properties

名称	类型	必填	默认值	说明	备注
mode	string	否	-	列表选择的模式，可选项：single、multiple	-
has-mask	boolean	否	true	是否显示遮罩	-
close-on-mask	boolean	否	true	是否允许点击遮罩关闭下拉菜单	-
type	string	否	-	激活选择的样式种类，可选项：checkbox，switch	-
icon	string	否	-	列表选择的图标	-
active-color	string	否	-	选中状态的颜色	-
disabled	boolean	否	false	是否禁用	-
direction	up | down	否	down	展示方向	-

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-
title-class	标题可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--dropdown-menu-title-wrap-bg-color	theme.color.gray.background.default	-	-
--dropdown-menu-icon-margin-left	theme.spacing.gap.g1	标题与图标间距	-
--dropdown-title-font-weight	theme.fontWeight.regular	标题字重	-

TiDropdownItem API

属性 Properties

名称	类型	必填	默认值	说明	备注
title	string	是	-	标题	-
options	Array<TiDropdownItemOption>	是	-	选项列表	-
visible	boolean	否	false	是否显示	-
mode	string	否	single	列表选择的模式，可选值：single、multiple	-
icon	string	否	selected	列表选择的图标	-
disabled	boolean	否	false	是否禁用	-
value	string | number | Array<string | number>	否	-	唯一标识	-
type	checkbox | switch	否	checkbox	下拉列表选中时的选择样式	-
has-mask	boolean	否	false	是否显示遮罩	-
close-on-mask	boolean	否	false	是否阻止遮罩点击关闭事件	-
active-color	string	否	-	选中状态的颜色	-
has-submit	boolean	否	false	是否显示提交的按钮	-
submit-text	string	否	-	提交按钮的文字	-
direction	string	否	down	展示方向， 可选值为：down、up	-
getPosition	(rect: { rect: DOMRect; direction: 'up' | 'down'; position: IPosition }) => IPosition	否	down	展示方向， 可选值为：down、up	自定义展示位置

TiDropdownItemOption

interface TiDropdownItemOption {
  title?: string;
  label?: string;
  desc?: string;
  value: string | number;
}

事件 Events

名称	参数列表	描述	备注
close	(e: CustomEvent<never>) => void	关闭时触发的事件	-
open	(e: CustomEvent<never>) => void	打开时触发的事件	-
change	(e: CustomEvent<string | number | Array<string | number>>) => void	切换时触发的事件	-
submit	(e: CustomEvent<string | number | Array<string | number>>) => void	提交时触发的事件	-

可扩展样式名 External Class

类名	说明	备注
ext-class	扩展样式类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--dropdown-active-color	theme.color.brand.1000	激活状态的主体颜色	-
--dropdown-label-active-color	theme.color.brand.1000	-	-
--dropdown-select-icon-color	theme.color.brand.1000	-	-
--dropdown-title-font-weight	theme.fontWeight.regular	标题字重	-
--dropdown-menu-icon-margin-left	theme.spacing.gap.g1	标题与图标间距	-