TMSUI

# DropdownMenu 下拉菜单

# 使用指南

Component({
  data: {
    filters: {
      // 单选菜单分组
      sort: [{  // 排序
        groupId: 'sort',  // 分组id
        mode: 'single', // 单选模式
        options: [
          { text: '距离优先', value: 0 },
          { text: '价格优先', value: 1 },
        ],
      }],
      // 多选菜单分组
      brand: [{ // 品牌
        groupId: 'brand',
        mode: 'multi',  // 多选
        options: [
          { text: '星星充电', value: 'xingxing', remind: true },  // 展示提醒红点
          { text: '云快充', value: 'ykc' },
        ],
      }],
      // 混合菜单分组
      other: [{ // 其他
        groupTitle: '资源类型', // 分组标题
        groupId: 'current',
        mode: 'multi',  // 多选
        options: [
          { text: '直流桩', value: [1, 3] },
          { text: '交流桩', value: [2, 4, 5] },
        ],
      },
      {
        groupTitle: '通勤位置',
        groupId: 'commute',
        mode: 'single',
        options: [
          { text: '家附近', value: 0, disabled: true }, // 默认禁用
          { text: '公司附近', value: 1, disabled: true },
        ],
      }],
    },
  },
});

tms-dropdown-menu
z-index 设置层级
activeColor 设置激活文本颜色
wrapper-class 自定义筛选框样式
customArrow 使用自定义箭头
arrow-class 自定义箭头样式
round 取消弹出层圆角

  <tms-dropdown-menu 
  z-index="25" 
  activeColor="#3F82FF" 
  wrapper-class="bar" 
  item-class="menu-item-class" 
  customArrow 
  arrow-class="arrowclass"
  round="{{false}}">
    <tms-dropdown-item></tms-dropdown-item>
  />

tms-dropdown-item
单选
popupStyle 自定义弹出层样式
divline 隐藏分割线
cancel 重复点击选项不取消选中
item-class 自定义选项样式

  <tms-dropdown-item
    id="filter-item-sort"
    popupStyle="padding-bottom: 46rpx"
    divline="{{false}}"
    cancel="{{false}}"
    optionsGroups="{{ filters.sort }}"
    item-class="item-row"
    bind:change="onFilterOptionChange"
  >
    <!-- 第三个menu自定义一个tag -->
    <view slot="menu-slot3" class="vip-tag">会员优惠</view>
  <tms-dropdown-item/>

多选
popupStyle 自定义弹出层样式
autoClose 点击选项不关闭popup
item-class 自定义选项样式
item-active-class 自定义选项激活样式
title 自定义筛选栏标题
activeColor 自定义筛选栏标题激活颜色样式


<tms-dropdown-item
  id="filter-item-brand"
  popupStyle="padding-left: 46rpx; padding-top: 8rpx"
  autoClose="{{false}}"
  optionsGroups="{{ filters.brand }}"
  item-class="item-round"
  item-active-class="item-round-active"
  title="全部品牌"
  activeColor="#0073FF"
  bind:change="onFilterOptionChange"
  bind:closed="onFilterPopupClosed"
>
  <!-- 自定义操作菜单 -->
  <view class="action flex-row-vc flex-main-between">
    <view id="brand" class="btn flex-row-hvc" bindtap="clickResetFilter">重置</view>
    <view id="brand" class="btn flex-row-hvc" bindtap="clickConfirm">确定</view>
  </view>
</tms-dropdown-item>

混合选择组, 多选&单选
popupStyle 自定义弹出层样式
autoClose 点击选项不关闭popup
remind 展示提醒红点
item-class 自定义选项样式
item-active-class 自定义选项激活样式
item-disabled-class 自定义选项禁用样式
title 自定义筛选栏标题
activeColor 自定义筛选栏标题激活颜色样式
group-title-class 自定义选项组标题样式

<tms-dropdown-item
  id="filter-item-other"
  popupStyle="padding-left: 46rpx;"
  title="其他筛选"
  autoClose="{{false}}"
  activeColor="#0073FF"
  remind
  optionsGroups="{{ filters.other }}"
  item-class="item-round item-round-other"
  item-active-class="item-round-active"
  item-disabled-class="disabled-class"
  group-title-class="group-title"
  bind:change="onFilterOptionChange"
  bind:click="clickFilterOption"
  bind:closed="onFilterPopupClosed"
>
  <!-- 前三个选项添加自定义标签 -->
  <view wx:for="123" slot="option-slot{{index + 1}}" class="vip-tag">会员优惠</view>
  <view class="action flex-row-vc flex-main-between">
    <view id="other" class="btn flex-row-hvc" bindtap="clickResetFilter">重置</view>
    <view id="other" class="btn flex-row-hvc" bindtap="clickConfirm">确定</view>
  </view>
</tms-dropdown-item>
</tms-dropdown-menu>
参数 说明 类型 可选值 默认值
active-color 菜单标题和选项的选中态颜色 String — —
z-index 菜单栏 z-index 层级 Number — 10
duration 动画时长，单位毫秒 Number — 200
direction 菜单展开方向 String down, up down
show-cover 是否显示遮罩层 Boolean — true
show-cover 是否显示遮罩层 Boolean — true
round 弹出层是否圆角 Boolean — true
customArrow 自定义箭头 Boolean — false
arrowIcons 自定义箭头icon, [a,b] a为激活箭头，b为未激活箭头 Array — 
  ['https://static.img.tai.qq.com/mp/refuel/images/arrow-up.png',
   'https://static.img.tai.qq.com/mp/refuel/images/arrow-down.png',] |

| close-on-click-cover | 是否在点击遮罩层后关闭菜单 | Boolean | — | true | | close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | Boolean | — | true | | lock-scroll | 是否屏蔽遮罩层下方元素滚动 | Boolean | — | true |

参数 说明
wrapper-class 筛选栏样式
item-class 选项块样式
item-text-class 选项块文本样式
item-arrow-class 选项块箭头样式
item-dot-class 选项块提醒标志样式
参数 说明 类型 可选值 默认值
title 菜单项标题 String — — 首个激活选项或首个选项文本
optionsGroups 选项组数组 Array — —
optionsGroups[i].groupId 选项组id string — —
optionsGroups[i].mode 选项组模式 string single 单选/multi 多选 single
optionsGroups[i].options 选项组选项 Array Option
disabled 是否禁用菜单 Boolean — false
activeColor 激活时文本颜色 String — 默认继承标题颜色
titleClass 标题额外类名 String — —
popup-style 自定义弹出层样式 String — —
autoClose 是否点击选项关闭popup Boolean — true
cancel 多选时，允许再次点击选项取消选中 Boolean — true
divline 是否使用分割线 Boolean — true
remind 是否展示提醒红点 Boolean — true
事件名 说明 参数
bind:click 点击选项时触发 {current: Option, activated: Activated}
bind:close 关闭菜单栏时触发 —
bind:change 点击选项导致 value 变化时触发 {current: Option, activated: Activated}
bind:open 打开菜单栏时触发 —
bind:opended 打开菜单栏且动画结束后触发 —
bind:closed 关闭菜单栏且动画结束后触发 —
参数 说明
wrapper-class 筛选栏样式
item-class 选项块样式
item-active-class 选项块激活样式
item-disabled-class 选项块禁用样式
group-title-class 选项组标题样式

# Option 数据结构

键名 说明 类型
text 文字 String
value 标识符 any
active 是否选中 Boolean
disabled 是否可点击 Boolean
remind 是否展示提醒标志 Boolean

# Activated 数据结构

键名 说明 类型
text 文字 String
value 标识符 Any
active 是否选中 Boolean
groupId 选项组id String

你可以获取DropdownItem组件的实例进行操作以满足更多场景需求

this.selectComponent(`#filter-sort`).reset() // 重置选项状态

this.selectComponent(`#filter-sort`).getActivated() // 获取已激活选项 Array<Activated>

this.selectComponent(`#filter-sort`).toggle() // 切换打开关闭

this.selectComponent(`#filter-sort`).data // 获取组件data（可用于更新页面源数据）

...

# CSS变量

// 标题文本大小
--dropdown-menu-title-size: 24rpx;
// 标题颜色
--dropdown-menu-title-color: #333;
// 选项颜色
--dropdown-item-color: #333;
// 选项文本大小
--dropdown-item-size: 28rpx;
// 面板背景色
--dropdown-item-background: #fff;
// 标题下分割线颜色
--dropdown-item-border-color: #979797;

# FAQ

  1. 存在一种情况，当我们点击一个选项此时组件内该选项的状态被更新为选中状态，但是此时页面（组件owner）上的源数据并未被改变，当页面内的任意data里的字段被更新时，页面内的旧数据就会覆盖掉组件内的数据状态，即你刚刚选中的选项由于页面执行了setData组件就被置为未选中状态了，遇到这种情况时，把页面的源数据也更新下就可以了，即保持页面的数据状态和组件内的数据状态一致，一种方法是获取组件实例的data来更新页面的源数据，当然你也可以用其他方法。

← swipe-action 左滑删除组件 →