80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
|
<script setup>
|
||
|
|
import { theme } from '@/config/theme'
|
||
|
|
import tabbarItem from './components/tabbar-item/index.vue'
|
||
|
|
const emit = defineEmits(['update:active'])
|
||
|
|
const props=defineProps({
|
||
|
|
active:{
|
||
|
|
type:Number,
|
||
|
|
default:0
|
||
|
|
},
|
||
|
|
list:{
|
||
|
|
type:Array,
|
||
|
|
default:()=>[]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const clickItem = (item) => {
|
||
|
|
emit('update:active',item.value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="tabbar-container">
|
||
|
|
<div class="tabbar">
|
||
|
|
<tabbar-item v-for="item in list" :key="item.url" @click="clickItem(item)">
|
||
|
|
<div class="tab-content">
|
||
|
|
<img :src="item.value === active ? item.selectedIconPath : item.iconPath" :style="{width:item.iconWidth?item.iconWidth:'34rpx',height:item.iconHeight?item.iconHeight:'40rpx'}" class="tab-icon">
|
||
|
|
<div class="tab-text" :style="{ color: active === item.value ? theme.colors.primary : '#666666' }">
|
||
|
|
{{ item.text }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</tabbar-item>
|
||
|
|
</div>
|
||
|
|
<!--底部安全区-->
|
||
|
|
<div class="content-placeholder"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tabbar-container {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #ffffff;
|
||
|
|
overflow: hidden;
|
||
|
|
.tabbar {
|
||
|
|
display: flex;
|
||
|
|
padding-top: 20rpx;
|
||
|
|
height: 104rpx;
|
||
|
|
|
||
|
|
.tab {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.tab-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
.tab-icon {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-text {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-placeholder {
|
||
|
|
height: 58rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|