init

uni_modules/nutui-uni/components/tabpane/index.scss

@@ -0,0 +1,24 @@
+@import "../tabs/index";
+
+.nut-theme-dark {
+  .nut-tab-pane {
+    background: $dark-background2;
+  }
+}
+
+.nut-tab-pane {
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  padding: $tab-pane-padding;
+  overflow: auto;
+  word-break: break-all;
+  background: $tab-pane-background;
+
+  &.inactive {
+    height: 0;
+    overflow: visible;
+  }
+}

uni_modules/nutui-uni/components/tabpane/index.ts

@@ -0,0 +1 @@
+export * from './tabpane'

uni_modules/nutui-uni/components/tabpane/tabpane.ts

@@ -0,0 +1,27 @@
+import type { ExtractPropTypes } from 'vue'
+import { CLICK_EVENT } from '../_constants'
+import { commonProps, makeNumericProp } from '../_utils'
+
+export const tabpaneProps = {
+  ...commonProps,
+  /**
+   * @description 标题
+   */
+  title: makeNumericProp(''),
+  /**
+   * @description 标签 Key, 匹配的标识符
+   */
+  paneKey: makeNumericProp(''),
+  /**
+   * @description 是否禁用标签
+   */
+  disabled: Boolean,
+}
+
+export type TabPaneProps = ExtractPropTypes<typeof tabpaneProps>
+
+export const tabpaneEmits = {
+  [CLICK_EVENT]: () => true,
+}
+
+export type TabPaneEmits = typeof tabpaneEmits

uni_modules/nutui-uni/components/tabpane/tabpane.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ComputedRef, CSSProperties } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { useInject } from '../_hooks'
+import { getMainClass, getMainStyle } from '../_utils'
+import { TAB_KEY } from '../tabs'
+import { tabpaneEmits, tabpaneProps } from './tabpane'
+
+const props = defineProps(tabpaneProps)
+defineEmits(tabpaneEmits)
+const { parent } = useInject<{ activeKey: ComputedRef<string>, autoHeight: ComputedRef<boolean>, animatedTime: ComputedRef<string | number> }>(TAB_KEY)
+
+const paneStyle = computed(() => {
+  const style: CSSProperties = {
+    display:
+      parent?.animatedTime.value === 0 && props.paneKey !== parent.activeKey.value ? 'none' : undefined,
+  }
+  return getMainStyle(props, style)
+})
+const classes = computed(() => {
+  return getMainClass(props, componentName, {
+    inactive: String(props.paneKey) !== parent?.activeKey.value && parent?.autoHeight.value,
+  })
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-tab-pane`
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :style="paneStyle" :class="classes">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>