<template> <div class="nav"> <div class="nav-left"> <div class="nav-item" :class="activeCode===item.code?'nav-active':''" v-for="(item,index) in navData" v-show="index<3 && item.noShow" @click="checkNav(item,index)" :key="'navC'+index" > <img :src="item.activeImg" v-if="activeCode===item.code" alt=""> <img :src="item.img" v-else alt=""> </div> </div> <div class="nav-right"> <div class="nav-item" :class="activeCode===item.code?'nav-active':''" v-for="(item,index) in navData" v-show="index>=3 && item.noShow" @click="checkNav(item,index)" :key="'navR'+index" > <img :src="item.activeImg" v-if="activeCode===item.code" alt=""> <img :src="item.img" v-else alt=""> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue' import { useRouter } from 'vue-router' export default defineComponent({ props: { navList: { type: Array, default: () => [] } }, setup(props, contex) { const router = useRouter() const navData: any = [] const proxyData = reactive({ activeCode: 'air', navData: navData, setNavValue(val: any) { proxyData.navData = val }, checkNav(item: any, index: any) { proxyData.activeCode = item.code contex.emit('changeNav', item) }, setActiveCode(activeCode: any) { proxyData.activeCode = activeCode } }) watch( props.navList, (newVal, oldValue) => { proxyData.setNavValue(newVal) } ) onMounted(() => { proxyData.setNavValue(props.navList) }) return { ...toRefs(proxyData) } } }) </script> <style lang="scss" scoped> .nav { display: flex; justify-content: space-between; padding-left: 8px; padding-top: 8px; padding-bottom: 8px; padding-right: 16px; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); height: 52px; width: 93%; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08); border-radius: 26px; z-index: 999; .nav-left, .nav-right { display: inline-block; vertical-align: middle; margin-right: 25px; .nav-item { position: relative; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; display: inline-block; margin-right: 25px; text-align: center; vertical-align: middle; img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 23px; margin: 0 auto; //height: 23.5px; } } .nav-active { background: #FFE823; } } .nav-right { margin-right: 0; .nav-item { margin-right: 15px; } } } </style>