下拉菜单 DropdownMenu

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-dropdown-item": "@titian-design/weapp/dropdown-item/index",
    "ti-dropdown-menu": "@titian-design/weapp/dropdown-menu/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-dropdown-item": "platform://titian-mp/ti-dropdown-item",
    "ti-dropdown-menu": "platform://titian-mp/ti-dropdown-menu"
  }
}

用法示例

基本使用

• App.wxml
• index.js

code

copy

code

<ti-dropdown-menu>
  <ti-dropdown-item visible title="默认展开" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="标题" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="自定义内容">
    <div>自定义内容</div>
  </ti-dropdown-item>
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
});

设置选中值

• App.wxml
• index.js

code

copy

code

<ti-dropdown-menu>
  <ti-dropdown-item value="{{['1']}}" ti-tle="标题1" options="{{dropMenuOptions}}"/>
  <ti-dropdown-item ti-tle="标题2" options="{{dropMenuOptions}}"/>
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
});

submit 模式

• App.wxml
• index.js

code

copy

code

<ti-dropdown-menu>
  <ti-dropdown-item hasSubmit submitText="确定" ti-tle="标题1" options="{{dropMenuOptions}}" />
  <ti-dropdown-item ti-tle="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
});

主动控制

• App.wxml
• index.js

code

copy

code

<ti-button bind:tap="handleClick"> 主动控制 </ti-button>
<ti-dropdown-menu>
  <ti-dropdown-item id="dropdown-item" title="默认展开" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="标题1" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
  handleClick() {
    this.selectComponent('#dropdown-item').toggle();
  },
});

方向向上

• App.wxml
• index.js

code

copy

code

<ti-dropdown-menu direction="up">
  <ti-dropdown-item ti-tle="标题1" options="{{dropMenuOptions}}" />
  <ti-dropdown-item ti-tle="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
});

禁用点击

copy

code

<ti-dropdown-menu>
  <ti-dropdown-item disabled title="标题1" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

事件操作

• App.wxml
• index.js

code

copy

code

<ti-dropdown-menu>
  <ti-dropdown-item
  bind:close="handleClose"
  bind:open="handleOpen"
  bind:change="handleChange"
  title="默认展开"
  options="{{dropMenuOptions}}"
  />
  <ti-dropdown-item title="标题1" options="{{dropMenuOptions}}" />
  <ti-dropdown-item title="标题2" options="{{dropMenuOptions}}" />
</ti-dropdown-menu>

copy

code

Page({
  data: {
    dropMenuOptions: [
      { title: '选项1', value: '1' },
      { title: '选项2', value: '2' },
    ],
  },
  handleClose(e) {
    console.log(e.detail);
  },
  handleOpen(e) {
    console.log(e.detail);
  },
  handleChange(e) {
    console.log(e.detail);
  },
});

ti-dropdown-menu 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	展示方向	-
get-position	(rect: { rect: DOMRect; direction: 'up' | 'down'; position: IPosition }) => IPosition	否	down	展示方向， 可选值为：down、up	自定义展示位置

IPosition

export type DistanceUnit = 'px' | 'em' | 'rem' | 'vw' | 'vh' | '%';

export type IPosition = {
  bottom?: `${number}${DistanceUnit}`;
  top?: `${number}${DistanceUnit}`;
  left?: `${number}${DistanceUnit}`;
  right?: `${number}${DistanceUnit}`;
};

可扩展样式名 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	标题字重	-

ti-dropdown-item 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	-

TiDropdownItemOption

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

事件 Events

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

可扩展样式类名（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