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/overlay/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/overlay/README.en-US.md
@@ -0,0 +1,34 @@
+
+## API
+
+### Overlay Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+background-color | String | - | \- | N
+duration | Number | 300 | \- | N
+prevent-scroll-through | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | 11000 | \- | N
+
+### Overlay Events
+
+name | params | description
+-- | -- | --
+click | `(context: { visible: boolean })` | \-
+
+### Overlay Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-overlay-bg-color | @mask-active | -
+--td-overlay-transition-duration | 300ms | -
--- a/uni_modules/tdesign-uniapp/components/overlay/README.md
+++ b/uni_modules/tdesign-uniapp/components/overlay/README.md
@@ -0,0 +1,54 @@
+---
+title: Overlay 遮罩层
+description: 通过遮罩层，可以强调部分内容
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TOverlay from '@tdesign/uniapp/overlay/overlay.vue';
+```
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+### Overlay Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+background-color | String | - | 遮罩层的背景色 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | false | 是否展示 | N
+z-index | Number | 11000 | 遮罩层级 | N
+
+### Overlay Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(context: { visible: boolean })` | 点击遮罩时触发
+
+### Overlay Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-overlay-bg-color | @mask-active | -
+--td-overlay-transition-duration | 300ms | -
--- a/uni_modules/tdesign-uniapp/components/overlay/overlay.css
+++ b/uni_modules/tdesign-uniapp/components/overlay/overlay.css
@@ -0,0 +1,17 @@
+.t-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: var(--td-overlay-bg-color, var(--td-mask-active, rgba(0, 0, 0, 0.6)));
+  transition-property: opacity;
+  transition-duration: var(--td-overlay-transition-duration, 300ms);
+  transition-timing-function: ease;
+}
+.t-fade-enter {
+  opacity: 0;
+}
+.t-fade-leave-to {
+  opacity: 0;
+}
--- a/uni_modules/tdesign-uniapp/components/overlay/overlay.vue
+++ b/uni_modules/tdesign-uniapp/components/overlay/overlay.vue
@@ -0,0 +1,105 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible && preventScrollThrough"
+      :class="prefix + '-overlay ' + transitionClass"
+      :style="tools._style([
+        '--td-overlay-transition-duration:' + duration + 'ms',
+        'z-index:' + _zIndex, 'top:' + distanceTop + 'px',
+        computedStyle,
+        customStyle
+      ])"
+      :aria-role="ariaRole || 'button'"
+      :aria-label="ariaLabel || '关闭'"
+      disable-scroll
+      @click.stop="handleClick"
+      @touchmove.stop.prevent="noop"
+      @transitionend="onTransitionEnd"
+    >
+      <slot />
+    </view>
+    <view
+      v-else-if="realVisible"
+      :class="prefix + '-overlay ' + transitionClass "
+      :style="tools._style([
+        'z-index:' + _zIndex,
+        'top:' + distanceTop + 'px',
+        computedStyle,
+        customStyle
+      ])"
+      :aria-role="ariaRole || 'button'"
+      :aria-label="ariaLabel || '关闭'"
+      @click.stop="handleClick"
+      @transitionend="onTransitionEnd"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import transition from '../mixins/transition';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-overlay`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [
+    transition(),
+    useCustomNavbar,
+  ],
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+    'leaved',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      computedStyle: '',
+      _zIndex: 11000,
+      tools,
+    };
+  },
+  watch: {
+    backgroundColor: {
+      handler(v) {
+        this.computedStyle = v ? `background-color: ${v};` : '';
+      },
+      immediate: true,
+    },
+    zIndex: {
+      handler(v) {
+        if (v !== 0) {
+          this._zIndex = v;
+        }
+      },
+      immediate: true,
+
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', {
+        visible: !this.visible,
+      });
+    },
+    noop() {},
+  },
+});
+</script>
+<style scoped>
+@import './overlay.css';
+</style>
--- a/uni_modules/tdesign-uniapp/components/overlay/props.ts
+++ b/uni_modules/tdesign-uniapp/components/overlay/props.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 遮罩层的背景色 */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /** 背景色过渡时间，单位毫秒 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 防止滚动穿透，即不允许点击和滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 是否展示 */
+  visible: Boolean,
+  /** 遮罩层级 */
+  zIndex: {
+    type: Number,
+    default: 11000,
+  },
+  /** 点击遮罩时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/overlay/type.ts
+++ b/uni_modules/tdesign-uniapp/components/overlay/type.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdOverlayProps {
+  /**
+   * 遮罩层的背景色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * 背景色过渡时间，单位毫秒
+   * @default 300
+   */
+  duration?: number;
+  /**
+   * 防止滚动穿透，即不允许点击和滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 是否展示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 遮罩层级
+   * @default 11000
+   */
+  zIndex?: number;
+  /**
+   * 点击遮罩时触发
+   */
+  onClick?: (context: { visible: boolean }) => void;
+}