first commit

uni_modules/tdesign-uniapp/components/tab-panel/props.ts

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 透传至 Badge 组件 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否禁用当前选项卡 */
+  disabled: Boolean,
+  /** `1.0.0-rc.1`。图标，传对象则透传至 Icon */
+  icon: {
+    type: [String, Object],
+  },
+  /** 选项卡名称 */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** 是否启用选项卡懒加载 */
+  lazy: Boolean,
+  /** 用于自定义选项卡面板内容 */
+  panel: {
+    type: String,
+  },
+  /** 选项卡的值，唯一标识 */
+  value: {
+    type: [String, Number],
+  },
+};

uni_modules/tdesign-uniapp/components/tab-panel/tab-panel.css

@@ -0,0 +1,15 @@
+.t-tab-panel {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.t-tab-panel--active {
+  height: auto;
+}
+.t-tab-panel--inactive {
+  height: 0;
+  overflow: visible;
+}

uni_modules/tdesign-uniapp/components/tab-panel/tab-panel.vue

@@ -0,0 +1,100 @@
+<template>
+  <view
+    v-if="!lazy || hasActivated"
+    :id="id"
+    :class="tClass + ' ' + classPrefix + ' ' + (active ? classPrefix + '--active' : classPrefix + '--inactive')"
+    :style="tools._style([customStyle, hide ? 'display: none' : ''])"
+    aria-role="tabpanel"
+  >
+    <view v-if="panel">
+      {{ panel }}
+    </view>
+    <slot />
+    <slot name="panel" />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-tab-panel`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+  externalClasses: [`${prefix}-class`],
+  mixins: [ChildrenMixin(RELATION_MAP.TabPanel)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      active: false,
+      hide: true,
+      id: '',
+      hasActivated: false,
+      tools,
+    };
+  },
+  watch: {
+    label: 'update',
+    badgeProps: {
+      handler() {
+        this.update();
+      },
+      deep: true,
+    },
+    disabled: 'update',
+
+    icon: 'update',
+    panel: 'update',
+    value: 'update',
+
+    lazy: 'update',
+  },
+  methods: {
+    setParent(parent) {
+      this[RELATION_MAP.TabPanel] = parent;
+      if (!parent.children.includes(this)) {
+        parent.children.push(this);
+      }
+      parent.innerAfterLinked(this);
+    },
+    setId(id) {
+      this.id = id;
+    },
+    getComputedName() {
+      if (this.value != null) {
+        return `${this.value}`;
+      }
+      return `${this.dataIndex}`;
+    },
+    update() {
+      this[RELATION_MAP.TabPanel]?.updateTabs();
+    },
+
+    render(active, parent) {
+      this.initialized = this.initialized || active;
+
+      if (active && !this.hasActivated) {
+        this.hasActivated = true;
+      }
+
+      this.active = active;
+      this.hide = !parent.animation && !active;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tab-panel.css';
+</style>

uni_modules/tdesign-uniapp/components/tab-panel/type.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TabValue } from '../tabs/type';
+
+export interface TdTabPanelProps {
+  /**
+   * 透传至 Badge 组件
+   * @default {}
+   */
+  badgeProps?: object;
+  /**
+   * 是否禁用当前选项卡
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * `1.0.0-rc.1`。图标，传对象则透传至 Icon
+   */
+  icon?: string | object;
+  /**
+   * 选项卡名称
+   * @default ''
+   */
+  label?: string;
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 用于自定义选项卡面板内容
+   */
+  panel?: string;
+  /**
+   * 选项卡的值，唯一标识
+   */
+  value?: TabValue;
+}