73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<template>
|
|
<div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
|
|
<router-view />
|
|
<van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
|
|
<van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
|
|
<span>{{ tab.title }}</span>
|
|
<template #icon="props">
|
|
<img :src="props.active ? tab.active: tab.inactive" alt="">
|
|
</template>
|
|
</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { tabbar } from '../src/router';
|
|
|
|
export default {
|
|
name: 'App',
|
|
data() {
|
|
return {
|
|
active: '3',
|
|
tabbar
|
|
};
|
|
},
|
|
provide() {
|
|
return {
|
|
root: this,
|
|
tabbar: this.$refs.tabbar
|
|
};
|
|
},
|
|
components: {},
|
|
watch: {
|
|
'$route': {
|
|
handler(val) {
|
|
document.title = val.meta.title || '自在福田'
|
|
this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
|
|
},
|
|
deep: true,
|
|
}
|
|
},
|
|
computed: {
|
|
showTabbar() {
|
|
const path = tabbar.map(tab => tab.path);
|
|
return path.includes(this.$route.path);
|
|
},
|
|
paddingBottom() {
|
|
return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import '~@/assets/css/reset.css';
|
|
@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
|
|
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
max-width: 750px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tabbar {
|
|
/* padding-top: .57rem; */
|
|
/* background: url('~@/assets/img/bg.png') top center no-repeat; */
|
|
/* background-size: contain; */
|
|
}
|
|
</style>
|