92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
|
|
<view
|
|
:class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
|
|
bordered ? 'is-border' : ''
|
|
}`"
|
|
:style="rootStyle"
|
|
>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'wd-tabbar',
|
|
options: {
|
|
addGlobalClass: true,
|
|
virtualHost: true,
|
|
styleIsolation: 'shared'
|
|
}
|
|
}
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
|
|
import type { TabbarItem } from '../wd-tabbar-item/types'
|
|
import { addUnit, getRect, isDef, objToStyle } from '../common/util'
|
|
import { useChildren } from '../composables/useChildren'
|
|
import { TABBAR_KEY, tabbarProps } from './types'
|
|
|
|
const props = defineProps(tabbarProps)
|
|
const emit = defineEmits(['change', 'update:modelValue'])
|
|
|
|
const height = ref<number | string>('') // 占位高度
|
|
const { proxy } = getCurrentInstance() as any
|
|
|
|
const { linkChildren } = useChildren(TABBAR_KEY)
|
|
|
|
linkChildren({
|
|
props,
|
|
setChange
|
|
})
|
|
|
|
const rootStyle = computed(() => {
|
|
const style: CSSProperties = {}
|
|
if (isDef(props.zIndex)) {
|
|
style['z-index'] = props.zIndex
|
|
}
|
|
return `${objToStyle(style)}${props.customStyle}`
|
|
})
|
|
|
|
watch(
|
|
[() => props.fixed, () => props.placeholder],
|
|
() => {
|
|
setPlaceholderHeight()
|
|
},
|
|
{ deep: true, immediate: false }
|
|
)
|
|
|
|
onMounted(() => {
|
|
if (props.fixed && props.placeholder) {
|
|
nextTick(() => {
|
|
setPlaceholderHeight()
|
|
})
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 子项状态变更
|
|
* @param child 子项
|
|
*/
|
|
function setChange(child: TabbarItem) {
|
|
let active = child.name
|
|
emit('update:modelValue', active)
|
|
emit('change', {
|
|
value: active
|
|
})
|
|
}
|
|
|
|
function setPlaceholderHeight() {
|
|
if (!props.fixed || !props.placeholder) {
|
|
return
|
|
}
|
|
|
|
getRect('.wd-tabbar', false, proxy).then((res) => {
|
|
height.value = Number(res.height)
|
|
})
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|