写一个名为midellBox 的Tabbar 底部导航栏 vue2 uviwe 跳转路径如下，并在快速开单页面中正确引用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: '快速开单', // 通过类名class控制样式大小 centerItem: true }, { id: 2, path: 'pages/tab/mine/mine', icon: 'static/userDefault.png', selectIcon: 'static/userPress.png', text: '我的', centerItem: false } ] <template> <view> 快速开单 <midellBox></midellBox> </view> </template> <script> import midellBox from '@/components/modell-box/modell-box.vue' export default { components:{ midellBox }, data() { return { }; } } </script> <style lang="scss"> </style>

你可以按照以下方式创建一个名为 `midellBox` 的 Tabbar 底部导航栏组件，并在快速开单页面中正确引用 `tabbarList` ：

<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 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f5f5;
  height: 60px;
}

.tabbar-item {
  display: 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`：

<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` 组件。请根据实际项目路径进行相应的调整。