vue底部footer导航组件
底部导航一定要用路径!!! 贼关键
举个例子:
你随便定义了一个变量, flag : 0 跳转首页, falg:1,跳转我的,
底部导航的组件不可能全项目使用, 点击我的页面 这个时候flag 已经变成了1,
从我的页面进入详情页,从详情页返回的时候,虽然路由没有变,但是flag 已经初始化成了0,
我们的判断条件没办法自定义,每次从详情页返回的时候都会被初始化,
!!! 判断一定要用路径
$route.path
<template> <div class="footer"> <div class="costlist1" @click="choicestate('/dashboard/analysis')"> <img class="costurl" v-if="$route.path==='/dashboard/analysis'" src="../../assets/img/bot-apply0.png" /> <img class="costurl" v-else src="../../assets/img/bot-apply1.png" /> <div class="costname" :style="{color:$route.path==='/dashboard/analysis'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}" >首页</div> </div> <div class="costlist1" @click="choicestate('/dashboard/toexamine')"> <a-badge :count="this.$store.state.applynum"> <img class="costurl" v-if="$route.path==='/dashboard/toexamine'" src="../../assets/img/1.png" /> <img class="costurl" v-else src="../../assets/img/0.png" /> </a-badge> <div class="costname" :style="{color:$route.path==='/dashboard/toexamine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}" >审核</div> </div> <div class="costlist1" @click="choicestate('/dashboard/mine')"> <img class="costurl" v-if="$route.path==='/dashboard/mine'" src="../../assets/img/mine11.png" /> <img class="costurl" v-else src="../../assets/img/mine12.png" /> <div class="costname" :style="{color:$route.path==='/dashboard/mine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}" >我的</div> </div> </div> </template>
<script> export default { name: 'layoutfooter', data() { return { applynum: 0, reimbnum: 0, wgtver: '' } } methods: { choicestate(path) { this.$router.push(path) } } } </script>
<style lang="scss" scoped> .footer { position: fixed; bottom: 0; width: 100%; display: flex; justify-content: space-between; height: 58px; background: #eff0f6; align-items: center; .costlist1 { display: flex; flex-direction: column; justify-content: center; flex: 1; height: 58px; align-items: center; img { width: 20px; height: 22px; } .costname { text-align: center; } } } .ant-carousel >>> .slick-slide { text-align: center; height: 160px !important; line-height: 160px; background: #364d79; overflow: hidden; } .ant-carousel >>> .slick-slide h3 { color: #fff; } </style>
vue抽取的footer组件,可复用
<template> <div class="app-foot"> {{footermsgcopyright}} <span class="source">{{footermsgname}}</span> </div> </template>
<script> export default { name: 'appfoot', data() { return { // 版权说明的文字 footermsgcopyright: 'copyright © 2020-2021 xxxx平台 - powered by ', // 单位 footermsgname: 'xxxx实验室' } } } </script>
<style scoped> .app-foot { /* footer 固定在页面底部 */ min-height: 35px; background-color: #eeeeee; width: 100%; font-size: 14px; display: flex; align-items: center; justify-content: center; } .source{ font-weight: 600; } </style>
复用时直接调用组件
主页面设定高度时,要把footer的高度空出来,其style可以如下:
<style> .main-container{ /* 35 = footer */ min-height: calc(100vh - 35px); } </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。