1.在componets文件夹中创建一个TabbarItem.vue的子组件
<template>
<div id="tabbarItem" @click="changePage">
<span v-show="!isShow">
<slot name="src"></slot>
</span>
<span v-show="isShow">
<slot name="active_src"></slot>
</span>
<span v-text="title">{{title}}</span>
</div>
</template>
<script>
export default {
name: 'TabbarItem',
props: {
title: {
type: String
},
page: {
type: String
},
sel: {
type: String
},
id: {
type: Number
}
},
data () {
return {
}
},
computed: {
// 这里是切换底部图片用的
isShow: function () {
if (this.sel === this.page) {
return true
}
return false
}
},
methods: {
changePage () {
// 点击跳转到对应的页面
if (this.id === 0) {
this.$router.push({ path: '/' })
} else if (this.id === 1 && this.$store.state.routerWo !== 'worksDetail') {
this.$router.push({ path: '/mb/worksDetail/' + this.$store.state.wId })
} else if (this.id === 2) {
this.$router.push({ path: '/mb/exhibition/' + this.$store.state.wId })
} else if (this.id === 3 && this.$store.state.routerWo !== 'authorDetail') {
this.$router.push({ path: '/mb/' + this.page + '/' + this.$store.state.authorId })
}
this.$emit('change', this.page)
}
}
}
</script>
<style lang="less" scoped>
#tabbarItem {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
span {
font-size: .875rem;
}
}
</style>
1.在componets文件夹中再创建一个Tabbar.vue的子组件(和tabbarItem同层级)
<template>
<div id="tabbarWrap">
<div class="warp">
<Tabbar-item v-for="(item,index) in dataList" :key="index" :title='item.title' :id="item.id" :page='item.page' @change='getVal' :sel="selected">
<img :src="item.src" slot="src" />
<img :src="item.active_src" slot="active_src" />
</Tabbar-item>
</div>
</div>
</template>
<script>
import TabbarItem from './TabbarItem'
export default {
components: {
TabbarItem
},
props: {
// 这里是普通组件传过来的值
workinfo: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
selected: 'worksDetail',
isShowAuthor: false,
isShowGoWorks: false,
id: 0,
dataList: [
{
title: '主页',
page: '',
id: 0,
// 图片要用require才能生效
src: require('../../assets/home.png'),
active_src: require('../../assets/home_active.png'),
isActive: true
},
{
title: '作品',
page: 'worksDetail',
id: 1,
src: require('../../assets/works_active.png'),
active_src: require('../../assets/works.png'),
isActive: false
},
{
title: '全景观展',
page: 'exhibition',
id: 2,
src: require('../../assets/allview.png'),
active_src: require('../../assets/allview.png'),
isActive: false
},
{
title: '作者',
page: 'authorDetail',
id: 3,
src: require('../../assets/mine.png'),
active_src: require('../../assets/mine_active.png'),
isActive: false
}
]
}
},
mounted () {
this.selected = this.$route.path.split('/')[1]
},
methods: {
getVal (res) {
this.selected = res
}
},
computed: {
path () {
return this.$route.path
}
}
}
</script>
<style lang="less" scoped>
#tabbarWrap{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: .3125rem;
background-color: #fff;
z-index: 9;
.warp {
width: 100%;
border-top: 1px solid #eee;
background-color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 0;
img {
width: 1.875rem;
height: 1.875rem;
}
}
img {
margin-top: .625rem;
margin-bottom: .3125rem;
}
}
</style>
3.在需要的vue文件引入tabbar文件就行
最好做个判断，等workinfo有值的时候才渲染组件，可以判断其他的，比如数组的长度之类的
<Tabbar :workinfo="workinfo" v-if="workinfo"></Tabbar>
网友评论