131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
|
import { nextTick, onMounted } from 'vue'
|
|
import TnIcon from '../../icon/src/icon.vue'
|
|
import { navBarProps, navbarEmits } from './navbar'
|
|
import { useNavbar, useNavbarCustomStyle } from './composables'
|
|
|
|
const props = defineProps(navBarProps)
|
|
const emits = defineEmits(navbarEmits)
|
|
|
|
const { navbackButtonType, hasRightOperation, clickBackEvent, clickHomeEvent } =
|
|
useNavbar(props)
|
|
const {
|
|
ns,
|
|
backNs,
|
|
navBarInfo,
|
|
navbarClass,
|
|
navbarStyle,
|
|
navbarBgClass,
|
|
navbarBgStyle,
|
|
navbarPlaceholderStyle,
|
|
navbarWrapperStyle,
|
|
backStyle,
|
|
contentStyle,
|
|
rightOperationStyle,
|
|
} = useNavbarCustomStyle(props, navbackButtonType, hasRightOperation)
|
|
|
|
// 动态调用是返回首页还是返回上一页
|
|
const backEvent = (type: 'back' | 'home') => {
|
|
if (type === 'back') {
|
|
clickBackEvent()
|
|
} else {
|
|
clickHomeEvent()
|
|
}
|
|
}
|
|
|
|
// 组件初始化完成
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
emits('initFinish', navBarInfo)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view :class="[navbarClass]" :style="navbarStyle">
|
|
<!-- 背景颜色 -->
|
|
<view :class="navbarBgClass" :style="navbarBgStyle" />
|
|
<!-- 容器 -->
|
|
<view :class="[ns.e('wrapper')]" :style="navbarWrapperStyle">
|
|
<!-- 返回按钮区域 -->
|
|
<view
|
|
v-if="navbackButtonType !== 'none'"
|
|
:class="[backNs.b()]"
|
|
:style="backStyle"
|
|
>
|
|
<slot name="back">
|
|
<!-- 双图标 -->
|
|
<view
|
|
v-if="navbackButtonType === 'multi'"
|
|
:class="[backNs.e('multi')]"
|
|
>
|
|
<view :class="[backNs.e('multi__item')]" @tap.stop="clickBackEvent">
|
|
<TnIcon :name="props.backIcon" />
|
|
</view>
|
|
<view :class="[backNs.e('multi__item')]" @tap.stop="clickHomeEvent">
|
|
<TnIcon :name="props.homeIcon" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 单图标 -->
|
|
<view
|
|
v-if="navbackButtonType === 'single'"
|
|
:class="[backNs.e('single')]"
|
|
@tap.stop="backEvent(props.backIcon ? 'back' : 'home')"
|
|
>
|
|
<TnIcon v-if="props.backIcon" :name="props.backIcon" />
|
|
<TnIcon v-else-if="props.homeIcon" :name="props.homeIcon" />
|
|
</view>
|
|
|
|
<!-- 文字返回 -->
|
|
<view
|
|
v-if="navbackButtonType === 'text'"
|
|
:class="[backNs.e('text')]"
|
|
@tap.stop="clickBackEvent"
|
|
>
|
|
<view :class="[backNs.e('text__icon')]">
|
|
<TnIcon :name="backIcon || 'left'" />
|
|
</view>
|
|
<view class="tn-text-ellipsis-1" :class="[backNs.e('text__value')]">
|
|
{{ backText || '返回' }}
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</view>
|
|
|
|
<!-- 内容数据 -->
|
|
<view
|
|
v-if="$slots.default"
|
|
:class="[
|
|
ns.e('content'),
|
|
{
|
|
[ns.em('content', 'center')]: props.center,
|
|
},
|
|
]"
|
|
:style="contentStyle"
|
|
>
|
|
<slot />
|
|
</view>
|
|
|
|
<!-- 右边操作区域 -->
|
|
<view
|
|
v-if="$slots.right"
|
|
:class="[ns.e('right-operation')]"
|
|
:style="rightOperationStyle"
|
|
>
|
|
<slot name="right" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 固定之后会导致容器塌陷 -->
|
|
<view
|
|
v-if="fixed && placeholder"
|
|
:class="[ns.e('placeholder')]"
|
|
:style="navbarPlaceholderStyle"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../theme-chalk/src/navbar.scss';
|
|
</style>
|