你可以按照以下方式创建一个名为 `midellBox` 的
Tabbar 底部导航栏组件，并在快速开单页面中正确引用 `
tabbarList` ：
```vue
<template>
<div>
<router-link v-for="
tab in
tabbarList" :key="
tab.id" :to="
tab.path" class="
tabbar-item">
<img :src="
tab.icon" :class="{ active: currentPath ===
tab.path }" alt="">
<span :class="{ active: currentPath ===
tab.path }">{{
tab.text }}</span>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
tabbarList: [
{
id: 0,
path: 'pages/
tab/order/index',
icon: 'static/orderDefault.png',
selectIcon: 'static/orderPress.png',
text: '订单',
centerItem: false
},
{
id: 1,
path: 'pages/
tab/quckBilling/quickBilling.vue',
icon: 'static/userDefault.png',
selectIcon: 'static/userPress.png',
text: '快速开单',
centerItem: true
},
{
id: 2,
path: 'pages/
tab/mine/mine',
icon: 'static/userDefault.png',
selectIcon: 'static/userPress.png',
text: '我的',
centerItem: false
}
],
currentPath: ''
};
},
created() {
this.currentPath = this.$route.path;
}
};
</script>
<style>
.
tabbar {
displ
ay: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
height: 60px;
}
.
tabbar-item {
displ
ay: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #999999;
}
.
tabbar-item img {
width: 24px;
height: 24px;
}
.
tabbar-item span {
font-size: 12px;
}
.
tabbar-item .active {
color: #007aff;
}
</style>
```
然后，在你的快速开单页面中引入 `midellBox` 组件，以正确使用 `
tabbarList`：
```vue
<template>
<
view>
快速开单
<midellBox></midellBox>
</
view>
</template>
<script>
import midellBox from '@/components/modell-box/modell-box.vue';
export default {
components: {
midellBox
}
};
</script>
<style lang="scss">
</style>
```
这样，你就可以在快速开单页面中正确引用 `
tabbarList` 并使用 `midellBox` 组件。请根据实际项目路径进行相应的调整。
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
