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/drawer/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/drawer/README.en-US.md
@@ -0,0 +1,54 @@
+:: BASE_DOC ::
+
+## API
+
+### Drawer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+close-on-overlay-click | Boolean | true | \- | N
+destroy-on-close | Boolean | false | \- | N
+items | Array | - | Typescript：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts) | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts) | N
+placement | String | right | options: left/right | N
+show-overlay | Boolean | true | \- | N
+title | String | - | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | 11500 | \- | N
+
+### Drawer Events
+
+name | params | description
+-- | -- | --
+close | `(context: { trigger: DrawerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
+item-click | `(context: { index: number; item: DrawerItem })` | \-
+overlay-click | \- | \-
+update-visible | `(context: { visible: boolean })` | \-
+
+### Drawer Slots
+
+name | Description
+-- | --
+\- | \-
+footer | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | -
+--td-drawer-border-color | @border-level-1-color | -
+--td-drawer-footer-padding-bottom | 40rpx | -
+--td-drawer-hover-color | @bg-color-secondarycontainer | -
+--td-drawer-item-icon-color | @drawer-title-color | -
+--td-drawer-item-icon-size | 48rpx | -
+--td-drawer-item-padding | 32rpx | -
+--td-drawer-sidebar-height | 70vh | -
+--td-drawer-title-color | @text-color-primary | -
+--td-drawer-title-font | @font-title-large | -
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | -
+--td-drawer-width | 560rpx | -
--- a/uni_modules/tdesign-uniapp/components/drawer/README.md
+++ b/uni_modules/tdesign-uniapp/components/drawer/README.md
@@ -0,0 +1,80 @@
+---
+title: Drawer 抽屉
+description: 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDrawer from '@tdesign/uniapp/drawer/drawer.vue';
+```
+
+
+### 基础抽屉
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
+>Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
+
+
+
+## API
+
+### Drawer Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
+destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts) | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts) | N
+placement | String | right | 抽屉方向。可选项：left/right | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String | - | 抽屉的标题 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 组件是否可见。支持语法糖 `v-model:visible` | N
+z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
+
+### Drawer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | `(context: { trigger: DrawerTriggerSource })` | 关闭时触发。。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
+item-click | `(context: { index: number; item: DrawerItem })` | 点击抽屉里的列表项
+overlay-click | \- | 如果蒙层存在，点击蒙层时触发
+update-visible | `(context: { visible: boolean })` | 更新可见性
+
+### Drawer Slots
+
+名称 | 描述
+-- | --
+\- | 自定义抽屉的底部
+footer | 抽屉的底部
+title | 自定义 `title` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | -
+--td-drawer-border-color | @border-level-1-color | -
+--td-drawer-footer-padding-bottom | 40rpx | -
+--td-drawer-hover-color | @bg-color-secondarycontainer | -
+--td-drawer-item-icon-color | @drawer-title-color | -
+--td-drawer-item-icon-size | 48rpx | -
+--td-drawer-item-padding | 32rpx | -
+--td-drawer-sidebar-height | 70vh | -
+--td-drawer-title-color | @text-color-primary | -
+--td-drawer-title-font | @font-title-large | -
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | -
+--td-drawer-width | 560rpx | -
--- a/uni_modules/tdesign-uniapp/components/drawer/drawer.css
+++ b/uni_modules/tdesign-uniapp/components/drawer/drawer.css
@@ -0,0 +1,62 @@
+.t-drawer {
+  background: var(--td-drawer-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  width: var(--td-drawer-width, 560rpx);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.t-drawer--hover {
+  background-color: var(--td-drawer-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-drawer__title {
+  font: var(--td-drawer-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  padding: 48rpx 32rpx 16rpx;
+  color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-drawer__sidebar {
+  height: var(--td-drawer-sidebar-height, 70vh);
+}
+.t-drawer__sidebar-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-top: var(--td-drawer-item-padding, 32rpx);
+  padding-right: 0;
+  padding-bottom: var(--td-drawer-item-padding, 32rpx);
+  padding-left: var(--td-drawer-item-padding, 32rpx);
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-drawer__sidebar-item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-drawer-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-drawer__sidebar-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-drawer__sidebar-item::after {
+  left: var(--td-drawer-item-padding, 32rpx);
+}
+.t-drawer__sidebar-item-title {
+  flex: 1;
+  color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-drawer__sidebar-item-icon {
+  padding-right: 16rpx;
+  color: var(--td-drawer-item-icon-color, var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))));
+  font-size: var(--td-drawer-item-icon-size, 48rpx);
+}
+.t-drawer__footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--td-drawer-footer-padding-bottom, 40rpx);
+}
--- a/uni_modules/tdesign-uniapp/components/drawer/drawer.vue
+++ b/uni_modules/tdesign-uniapp/components/drawer/drawer.vue
@@ -0,0 +1,144 @@
+<template>
+  <view>
+    <t-popup
+      v-if="!destroyOnClose || dataVisible"
+      :custom-style="tools._style([customStyle])"
+      :visible="dataVisible"
+      :z-index="zIndex"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :placement="placement == 'right' ? 'right' : 'left'"
+      :show-overlay="showOverlay"
+      :overlay-props="overlayProps"
+      :close-on-overlay-click="closeOnOverlayClick"
+      @visible-change="onVisibleChange"
+    >
+      <view :class="classPrefix">
+        <slot name="title" />
+        <view
+          v-if="title"
+          :class="classPrefix + '__title'"
+        >
+          {{ title }}
+        </view>
+        <scroll-view
+          :class="classPrefix + '__sidebar'"
+          scroll-y
+          type="list"
+        >
+          <view
+            v-for="(item, index) in items"
+            :key="index"
+            :class="classPrefix + '__sidebar-item'"
+            :hover-class="classPrefix + '--hover'"
+            :hover-start-time="0"
+            :hover-stay-time="100"
+            wx:item="item"
+            :data-item="item"
+            :data-index="index"
+            :aria-role="ariaRole || 'button'"
+            :aria-label="item.title"
+            @click="onItemClick"
+          >
+            <view
+              v-if="item.icon"
+              :aria-hidden="true"
+              :class="classPrefix + '__sidebar-item-icon'"
+            >
+              <t-icon :name="item.icon" />
+            </view>
+
+            <view :class="classPrefix + '__sidebar-item-title'">
+              {{ item.title }}
+            </view>
+          </view>
+        </scroll-view>
+        <view :class="classPrefix + '__footer'">
+          <slot />
+          <slot name="footer" />
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import TPopup from '../popup/popup';
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-drawer`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [
+    useCustomNavbar,
+  ],
+  components: {
+    TPopup,
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+    'close',
+    'overlay-click',
+    'item-click',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      tools,
+      dataVisible: coalesce(this.visible, this.defaultVisible),
+    };
+  },
+  watch: {
+    visible(e) {
+      this.dataVisible = e;
+    },
+  },
+  methods: {
+    // closeOnOverlayClick 为 true 时才能触发 popup 的 visible-change 事件
+    onVisibleChange(detail) {
+      const { visible } = detail;
+      const { showOverlay } = this;
+
+      this.dataVisible = visible;
+
+      if (!visible) {
+        this.$emit('close', { trigger: 'overlay' });
+      }
+
+      if (showOverlay) {
+        this.$emit('overlay-click', { visible });
+      }
+      this.$emit('update:visible', visible);
+    },
+
+    onItemClick(detail) {
+      const { index, item } = detail.currentTarget.dataset;
+
+      this.$emit('item-click', { index, item });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './drawer.css';
+</style>
+<style>
+.t-drawer__sidebar {
+  width: 100%;
+}
+</style>
--- a/uni_modules/tdesign-uniapp/components/drawer/props.ts
+++ b/uni_modules/tdesign-uniapp/components/drawer/props.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDrawerProps } from './type';
+export default {
+  /** 点击蒙层时是否触发抽屉关闭事件 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉关闭时是否销毁节点 */
+  destroyOnClose: Boolean,
+  /** 抽屉里的列表项 */
+  items: {
+    type: Array,
+  },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 抽屉方向 */
+  placement: {
+    type: String,
+    default: 'right' as TdDrawerProps['placement'],
+    validator(val: TdDrawerProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉的标题 */
+  title: {
+    type: String,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 组件是否可见。支持语法糖 `v-model:visible` */
+  visible: Boolean,
+  /** 抽屉层级，样式默认为 11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 关闭时触发。 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击抽屉里的列表项 */
+  onItemClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 更新可见性 */
+  onUpdateVisible: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/drawer/type.ts
+++ b/uni_modules/tdesign-uniapp/components/drawer/type.ts
@@ -0,0 +1,81 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdDrawerProps {
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 抽屉里的列表项
+   */
+  items?: DrawerItem[];
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 抽屉的标题
+   */
+  title?: string;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 组件是否可见。支持语法糖 `v-model:visible`
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 关闭时触发。
+   */
+  onClose?: (context: { trigger: DrawerTriggerSource }) => void;
+  /**
+   * 点击抽屉里的列表项
+   */
+  onItemClick?: (context: { index: number; item: DrawerItem }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: () => void;
+  /**
+   * 更新可见性
+   */
+  onUpdateVisible?: (context: { visible: boolean }) => void;
+}
+
+export interface DrawerItem {
+  title: string;
+  icon: string;
+}
+
+export type DrawerTriggerSource = 'overlay';