first commit

2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/README.en-US.md
@@ -0,0 +1,95 @@
+:: BASE_DOC ::
+
+## API
+
+### DropdownMenu Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+arrow-icon | String / Object | 'caret-down-small' | \- | N
+close-on-click-overlay | Boolean | true | \- | N
+duration | String / Number | 200 | \- | N
+show-overlay | Boolean | true | \- | N
+z-index | Number | 11600 | \- | N
+
+### DropdownMenu Events
+
+name | params | description
+-- | -- | --
+close | \- | \-
+open | \- | \-
+
+### DropdownMenu Slots
+
+name | Description
+-- | --
+\- | \-
+
+### DropdownMenu External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-item | \-
+t-class-label | \-
+
+
+### DropdownItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disabled | Boolean | false | \- | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+label | String | - | \- | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+options-columns | String / Number | 1 | \- | N
+options-layout | String | columns | `deprecated` | N
+placement | String | left | options: left/right | N
+value | String / Number / Array | undefined | `v-model:value` is supported。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+
+### DropdownItem Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: DropdownValue })` | \-
+close | \- | \-
+confirm | `(context: { value: DropdownValue })` | \-
+reset | \- | \-
+
+### DropdownItem Slots
+
+name | Description
+-- | --
+\- | \-
+footer | \-
+
+### DropdownItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-column | \-
+t-class-column-item | \-
+t-class-column-item-label | \-
+t-class-content | \-
+t-class-footer | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dropdown-menu-active-color | @brand-color | -
+--td-dropdown-menu-bg-color | @bg-color-container | -
+--td-dropdown-menu-border-width | 1px | -
+--td-dropdown-menu-color | @text-color-primary | -
+--td-dropdown-menu-disabled-color | @text-color-disabled | -
+--td-dropdown-menu-font-size | 28rpx | -
+--td-dropdown-menu-height | 96rpx | -
+--td-dropdown-menu-icon-size | 40rpx | -
+--td-dropdown-body-max-height | 560rpx | -
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/README.md
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/README.md
@@ -0,0 +1,125 @@
+---
+title: DropdownMenu 下拉菜单
+description: 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+### 引入组件
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import DropdownMenu from '@tdesign/uniapp/dropdown-menu/dropdown-menu.vue';
+import DropdownItem from '@tdesign/uniapp/dropdown-item/dropdown-item.vue';
+```
+
+### 单选下拉菜单
+
+{{ single }}
+
+### 多列下拉菜单
+
+{{ multi }}
+
+### 树形下拉菜单
+
+{{ tree }}
+
+## API
+
+### DropdownMenu Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
+close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
+duration | String / Number | 200 | 动画时长 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+z-index | Number | 11600 | 菜单栏 z-index 层级 | N
+
+### DropdownMenu Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 菜单关闭时触发
+open | \- | 菜单展开时触发
+
+### DropdownMenu Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### DropdownMenu External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-item | 选项样式类
+t-class-label | 标签样式类
+
+
+### DropdownItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disabled | Boolean | false | 是否禁用操作项 | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+label | String | - | 标题 | N
+multiple | Boolean | false | 是否多选 | N
+options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+options-columns | String / Number | 1 | 选项分栏（1-3） | N
+options-layout | String | columns | 已废弃。选项排列；不再支持 tree 布局，可与 treeSelect 配合使用 | N
+placement | String | left | 复选框和内容相对位置，仅单选菜单栏有效。可选项：left/right | N
+value | String / Number / Array | undefined | 选中值。支持语法糖 `v-model:value`。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/dropdown-item/type.ts) | N
+
+### DropdownItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: DropdownValue })` | 值改变时触发
+close | \- | 关闭时触发
+confirm | `(context: { value: DropdownValue })` | 点击确认时触发
+reset | \- | 点击重置时触发
+
+### DropdownItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+footer | 底部
+
+### DropdownItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-column | 菜单列样式类
+t-class-column-item | 菜单列选项样式类
+t-class-column-item-label | 菜单列选项标签样式类
+t-class-content | 内容样式类
+t-class-footer | 底部样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-dropdown-menu-active-color | @brand-color | -
+--td-dropdown-menu-bg-color | @bg-color-container | -
+--td-dropdown-menu-border-width | 1px | -
+--td-dropdown-menu-color | @text-color-primary | -
+--td-dropdown-menu-disabled-color | @text-color-disabled | -
+--td-dropdown-menu-font-size | 28rpx | -
+--td-dropdown-menu-height | 96rpx | -
+--td-dropdown-menu-icon-size | 40rpx | -
+--td-dropdown-body-max-height | 560rpx | -
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/dropdown-menu.css
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/dropdown-menu.css
@@ -0,0 +1,59 @@
+.t-dropdown-menu {
+  display: flex;
+  height: var(--td-dropdown-menu-height, 96rpx);
+  background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  position: relative;
+}
+.t-dropdown-menu::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+}
+.t-dropdown-menu::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-dropdown-menu:after {
+  height: var(--td-dropdown-menu-border-width, 1px);
+}
+.t-dropdown-menu__item {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--td-spacer, 16rpx);
+  position: relative;
+  overflow: hidden;
+  color: var(--td-dropdown-menu-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-dropdown-menu__item--active {
+  color: var(--td-dropdown-menu-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-dropdown-menu__item--disabled {
+  color: var(--td-dropdown-menu-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+:deep(.t-dropdown-menu__icon) {
+  font-size: var(--td-dropdown-menu-icon-size, 40rpx);
+  padding: 4rpx;
+  box-sizing: border-box;
+  transition: transform 240ms ease;
+}
+:deep(.t-dropdown-menu__icon)--active {
+  transform: rotate(180deg);
+}
+:deep(.t-dropdown-menu__icon):not(:empty) {
+  margin-left: 8rpx;
+}
+.t-dropdown-menu__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--td-dropdown-menu-font-size, 28rpx);
+}
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/dropdown-menu.vue
@@ -0,0 +1,188 @@
+<template>
+  <view
+    id="t-bar"
+    :style="tools._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+    @touchmove.stop.prevent="parseEventDynamicCode($event, activeIdx === -1 ? '' : 'noop')"
+  >
+    <view
+      v-for="(item, index) in menus"
+      :key="index"
+      :data-index="index"
+      :class="
+        tools.cls(classPrefix + '__item', [
+          ['active', activeIdx == index],
+          ['disabled', item.disabled],
+          [index, true]
+        ]) +
+          ' ' +
+          tClassItem
+      "
+      :aria-disabled="item.disabled"
+      aria-role="button"
+      :aria-expanded="activeIdx === index"
+      aria-haspopup="menu"
+      @click="handleToggle(index)"
+    >
+      <view :class="classPrefix + '__title ' + tClassLabel">
+        {{ item.label }}
+      </view>
+
+      <block
+        v-if="_arrowIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_arrowIcon.style || ''"
+          :t-class="getIconTClass(index)"
+          :class="getIconClass(index)"
+          :prefix="_arrowIcon.prefix"
+          :name="_arrowIcon.name"
+          :size="_arrowIcon.size"
+          :color="_arrowIcon.color"
+          :aria-hidden="true"
+          :aria-label="_arrowIcon.ariaLabel"
+          :aria-role="_arrowIcon.ariaRole"
+          @click="_arrowIcon.click || ''"
+        />
+      </block>
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-dropdown-menu`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-item`,
+    `${prefix}-class-label`,
+    `${prefix}-class-icon`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.DropdownItem)],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['close', 'open'],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      menus: null,
+      activeIdx: -1,
+      bottom: 0,
+      _arrowIcon: {
+        name: props.arrowIcon.default,
+      },
+      tools,
+    };
+  },
+  watch: {
+    arrowIcon: {
+      handler(v) {
+        this._arrowIcon = calcIcon(v);
+      },
+      immediate: true,
+    },
+
+    activeIdx(v) {
+      this.$emit(v === -1 ? 'close' : 'open');
+    },
+  },
+  mounted() {
+    this.getAllItems();
+  },
+  methods: {
+    getIconTClass(index) {
+      return canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    },
+    getIconClass(index) {
+      return !canUseVirtualHost() ? this.getIconRealClass(index) : '';
+    },
+    getIconRealClass(index) {
+      const { classPrefix, activeIdx, tClassIcon } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${activeIdx == index ? 'active ' : ' '}${tClassIcon}`;
+    },
+    parseEventDynamicCode,
+    toggle(index) {
+      const { activeIdx, duration } = this;
+      const prevItem = this.children[activeIdx];
+      const currItem = this.children[index];
+
+      if (currItem?.disabled) return;
+
+      if (activeIdx !== -1) {
+        prevItem.$emit('close');
+        prevItem.show = false;
+
+        setTimeout(() => {
+          prevItem.$emit('closed');
+        }, duration);
+      }
+
+      if (index == null || activeIdx === index) {
+        this.activeIdx = -1;
+      } else {
+        currItem.$emit('open');
+        this.activeIdx = index;
+
+        currItem.show = true;
+
+        setTimeout(() => {
+          currItem.$emit('opened');
+        }, duration);
+      }
+    },
+    getAllItems() {
+      const menus = this.children?.map(data => ({
+        label: data.label || data.computedLabel,
+        disabled: data.disabled,
+      }));
+
+      this.menus = menus;
+    },
+    handleToggle(index) {
+      this.toggle(index);
+    },
+
+    noop() {},
+  },
+});
+</script>
+<style scoped>
+@import './dropdown-menu.css';
+</style>
+<style scoped>
+:deep(.t-dropdown-menu__icon) {
+  font-size: var(--td-dropdown-menu-icon-size, 20px);
+  padding: 2px;
+  box-sizing: border-box;
+  transition: transform 240ms ease;
+}
+:deep(.t-dropdown-menu__icon)--active {
+  transform: rotate(180deg);
+}
+:deep(.t-dropdown-menu__icon):not(:empty) {
+  margin-left: 4px;
+}
+</style>
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/props.ts
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/props.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDropdownMenuProps } from './type';
+export default {
+  /** 自定义箭头图标 */
+  arrowIcon: {
+    type: [String, Object],
+    default: 'caret-down-small' as TdDropdownMenuProps['arrowIcon'],
+  },
+  /** 是否在点击遮罩层后关闭菜单 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 动画时长 */
+  duration: {
+    type: [String, Number],
+    default: 200 as TdDropdownMenuProps['duration'],
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 菜单栏 z-index 层级 */
+  zIndex: {
+    type: Number,
+    default: 11600,
+  },
+  /** 菜单关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 菜单展开时触发 */
+  onOpen: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/dropdown-menu/type.ts
+++ b/uni_modules/tdesign-uniapp/components/dropdown-menu/type.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdDropdownMenuProps {
+  /**
+   * 自定义箭头图标
+   * @default 'caret-down-small'
+   */
+  arrowIcon?: string | object;
+  /**
+   * 是否在点击遮罩层后关闭菜单
+   * @default true
+   */
+  closeOnClickOverlay?: boolean;
+  /**
+   * 动画时长
+   * @default 200
+   */
+  duration?: string | number;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 菜单栏 z-index 层级
+   * @default 11600
+   */
+  zIndex?: number;
+  /**
+   * 菜单关闭时触发
+   */
+  onClose?: () => void;
+  /**
+   * 菜单展开时触发
+   */
+  onOpen?: () => void;
+}