69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { formatDomSizeValue } from '../../../utils'
|
|
import { tabsEmits, tabsProps } from './tabs'
|
|
import { useTabs, useTabsCustomStyle } from './composables'
|
|
|
|
const props = defineProps(tabsProps)
|
|
defineEmits(tabsEmits)
|
|
|
|
const {
|
|
tabItems,
|
|
componentId,
|
|
barComponentId,
|
|
barOffsetLeft,
|
|
scrollLeft,
|
|
showBar,
|
|
} = useTabs(props)
|
|
const { ns, tabsClass, tabsStyle, barClass, barStyle } =
|
|
useTabsCustomStyle(props)
|
|
</script>
|
|
|
|
<template>
|
|
<view :id="componentId" :class="[tabsClass]" :style="tabsStyle">
|
|
<!-- 距离顶部的距离占位 -->
|
|
<view
|
|
v-if="offsetTop"
|
|
:class="[ns.e('top-placeholder')]"
|
|
:style="{ height: `${offsetTop}px` }"
|
|
/>
|
|
<!-- 内容区域 -->
|
|
<scroll-view
|
|
:class="[ns.e('scroll-view')]"
|
|
:style="{
|
|
height: formatDomSizeValue(height || '100%'),
|
|
}"
|
|
:scroll-x="scroll"
|
|
scroll-with-animation
|
|
:scroll-left="scrollLeft"
|
|
>
|
|
<view
|
|
:class="[
|
|
ns.e('container'),
|
|
ns.is('scroll', scroll),
|
|
ns.is('no-bar', !showBar),
|
|
]"
|
|
>
|
|
<slot />
|
|
<!-- 滑块 -->
|
|
<view
|
|
v-if="bar || $slots.bar"
|
|
:id="barComponentId"
|
|
:class="[ns.e('bar-container')]"
|
|
:style="{
|
|
left: `${barOffsetLeft}px`,
|
|
opacity: `${barOffsetLeft && tabItems.length ? 1 : 0}`,
|
|
}"
|
|
>
|
|
<slot name="bar">
|
|
<view :class="[barClass]" :style="barStyle" />
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../theme-chalk/src/tabs.scss';
|
|
</style>
|