im-ui-mobile 0.1.0 → 0.1.2

package/components/im-tabs-tab-pane/im-tabs-tab-pane.vue

@@ -0,0 +1,145 @@
+<!-- components/im-tabs/im-tabs-tab-pane.vue -->
+<template>
+    <view v-if="shouldRender" :class="[
+        'im-tabs-tab-pane',
+        customClass,
+        {
+            'im-tabs-tab-pane-active': active,
+            'im-tabs-tab-pane-inactive': !active
+        }
+    ]" :style="paneStyle">
+        <slot v-if="shouldShowContent" />
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    index: {
+        type: Number,
+        default: 0
+    },
+    id: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    lazy: {
+        type: Boolean,
+        default: false
+    },
+    destroyOnInactive: {
+        type: Boolean,
+        default: false
+    },
+    customClass: {
+        type: String,
+        default: ''
+    }
+})
+
+// 注入父组件数据
+const tabsData = inject<any>('tabs')
+const { currentIndex, keepAlive } = tabsData || {}
+
+// 记录是否曾经激活过（用于懒加载）
+const hasBeenActive = ref(false)
+
+// 计算属性
+const active = computed(() => {
+    const isActive = currentIndex?.value === props.index
+    if (isActive) {
+        hasBeenActive.value = true
+    }
+    return isActive
+})
+
+const shouldRender = computed(() => {
+    if (props.destroyOnInactive && !active.value) {
+        return false
+    }
+
+    if (props.lazy && !active.value && !hasBeenActive.value) {
+        return false
+    }
+
+    return true
+})
+
+const shouldShowContent = computed(() => {
+    if (keepAlive?.value === false && !active.value) {
+        return false
+    }
+
+    if (props.lazy && !active.value && !hasBeenActive.value) {
+        return false
+    }
+
+    return true
+})
+
+const paneStyle = computed(() => {
+    const style: Record<string, any> = {}
+
+    if (active.value) {
+        style.display = 'block'
+    } else {
+        style.display = 'none'
+    }
+
+    return style
+})
+</script>
+
+<style lang="scss" scoped>
+.im-tabs-tab-pane {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    overflow: auto;
+    box-sizing: border-box;
+
+    // 水平布局
+    .im-tabs-content:not(.im-tabs-content-vertical) & {
+        width: 100%;
+    }
+
+    // 垂直布局
+    .im-tabs-content-vertical & {
+        height: 100%;
+    }
+
+    // 激活状态
+    &-active {
+        display: block;
+    }
+
+    // 非激活状态
+    &-inactive {
+        display: none;
+    }
+}
+
+// 动画效果
+.im-tabs-content {
+    &-fade {
+        .im-tabs-tab-pane {
+            animation-duration: 0.3s;
+            animation-fill-mode: both;
+
+            &-enter-active {
+                animation-name: im-tabs-fade-in;
+            }
+
+            &-leave-active {
+                animation-name: im-tabs-fade-out;
+            }
+        }
+    }
+}
+</style>