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/divider/README.en-US.md
+++ b/uni_modules/tdesign-uniapp/components/divider/README.en-US.md
@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: left/right/center | N
+content | String | - | \- | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N
+
+### Divider Slots
+
+name | Description
+-- | --
+content | \-
+
+### Divider External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-divider-border-width | 2rpx | -
+--td-divider-color | @bg-color-component | -
+--td-divider-content-color | @text-color-placeholder | -
+--td-divider-content-font | @font-body-small | -
+--td-divider-content-line-style | solid | -
+--td-divider-content-margin | @spacer-1 | -
+--td-divider-horizontal-margin | 20rpx | -
+--td-divider-vertical-margin | @spacer | -
--- a/uni_modules/tdesign-uniapp/components/divider/README.md
+++ b/uni_modules/tdesign-uniapp/components/divider/README.md
@@ -0,0 +1,64 @@
+---
+title: Divider 分割线
+description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDivider from '@tdesign/uniapp/divider/divider.vue';
+```
+
+### 基础分割符
+
+分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
+
+{{ base }}
+
+### 虚线样式
+
+{{ theme }}
+
+## API
+
+### Divider Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
+content | String | - | 子元素 | N
+dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
+layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+### Divider Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容
+
+### Divider External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-divider-border-width | 2rpx | -
+--td-divider-color | @bg-color-component | -
+--td-divider-content-color | @text-color-placeholder | -
+--td-divider-content-font | @font-body-small | -
+--td-divider-content-line-style | solid | -
+--td-divider-content-margin | @spacer-1 | -
+--td-divider-horizontal-margin | 20rpx | -
+--td-divider-vertical-margin | @spacer | -
--- a/uni_modules/tdesign-uniapp/components/divider/divider.css
+++ b/uni_modules/tdesign-uniapp/components/divider/divider.css
@@ -0,0 +1,56 @@
+.t-divider {
+  display: flex;
+  color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-style: var(--td-divider-content-line-style, solid);
+  border-width: 0;
+}
+.t-divider::before,
+.t-divider::after {
+  content: '';
+  display: block;
+  flex: 1;
+  box-sizing: border-box;
+  border: inherit;
+  border-color: inherit;
+  border-style: inherit;
+}
+.t-divider--horizontal {
+  align-items: center;
+  margin: var(--td-divider-horizontal-margin, 20rpx) 0;
+}
+.t-divider--horizontal::before,
+.t-divider--horizontal::after {
+  border-top-width: var(--td-divider-border-width, 2rpx);
+  transform: scaleY(0.5);
+  transform-origin: center;
+}
+.t-divider--horizontal .t-divider__content:not(:empty) {
+  margin: 0 var(--td-divider-content-margin, var(--td-spacer-1, 24rpx));
+}
+.t-divider--vertical {
+  flex-direction: column;
+  height: 28rpx;
+  margin: 0 var(--td-divider-vertical-margin, var(--td-spacer, 16rpx));
+}
+.t-divider--vertical::before,
+.t-divider--vertical::after {
+  border-left-width: var(--td-divider-border-width, 2rpx);
+  transform: scaleX(0.5);
+  transform-origin: center;
+}
+.t-divider--vertical-center {
+  align-items: center;
+  height: 100%;
+}
+.t-divider--dashed {
+  border-style: dashed;
+}
+.t-divider__content {
+  font: var(--td-divider-content-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-divider-content-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-divider--left::before,
+.t-divider--right::after {
+  max-width: 60rpx;
+}
--- a/uni_modules/tdesign-uniapp/components/divider/divider.vue
+++ b/uni_modules/tdesign-uniapp/components/divider/divider.vue
@@ -0,0 +1,79 @@
+<template>
+  <view :class="layout === 'vertical' ? classPrefix + '--vertical-center' : ''">
+    <view
+      :class="[
+        classPrefix,
+        tClass,
+        classPrefix + '--' + layout + ' ' + classPrefix + '--' + align + ' ' + (dashed ? classPrefix + '--dashed' : '')
+      ]"
+      :style="tools._style([dividerStyle, customStyle])"
+    >
+      <view
+        :class="[
+          tClassContent,
+          classPrefix + '__content'
+        ]"
+      >
+        <view v-if="content">
+          {{ content }}
+        </view>
+        <slot
+          v-else
+          name="content"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-divider`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+      dividerStyle: '',
+    };
+  },
+  watch: {
+    lineColor: {
+      handler() {
+        this.setStyle();
+      },
+      immediateU: true,
+    },
+  },
+  methods: {
+    setStyle() {
+      const {
+        lineColor,
+      } = this;
+      const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
+      this.dividerStyle = dividerStyle;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './divider.css';
+</style>
--- a/uni_modules/tdesign-uniapp/components/divider/props.ts
+++ b/uni_modules/tdesign-uniapp/components/divider/props.ts
@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDividerProps } from './type';
+export default {
+  /** 文本位置（仅在水平分割线有效） */
+  align: {
+    type: String,
+    default: 'center' as TdDividerProps['align'],
+    validator(val: TdDividerProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'center'].includes(val);
+    },
+  },
+  /** 子元素 */
+  content: {
+    type: String,
+  },
+  /** 是否虚线（仅在水平分割线有效） */
+  dashed: Boolean,
+  /** 分隔线类型有两种：水平和垂直 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdDividerProps['layout'],
+    validator(val: TdDividerProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+};
--- a/uni_modules/tdesign-uniapp/components/divider/type.ts
+++ b/uni_modules/tdesign-uniapp/components/divider/type.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdDividerProps {
+  /**
+   * 文本位置（仅在水平分割线有效）
+   * @default center
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * 子元素
+   */
+  content?: string;
+  /**
+   * 是否虚线（仅在水平分割线有效）
+   * @default false
+   */
+  dashed?: boolean;
+  /**
+   * 分隔线类型有两种：水平和垂直
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+}