Vue底部footer导航组件
!!! 判断一定要用路径
Vue抽取的footer组件,可复用
复用时直接调用组件
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.webp" />
<img class="costUrl" v-else src="../../assets/img/bot-apply1.webp" />
<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.webp" />
<img class="costUrl" v-else src="../../assets/img/0.webp" />
</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.webp" />
<img class="costUrl" v-else src="../../assets/img/mine12.webp" />
<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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
