vue 全局自定义组件 components

╰半橙微兮° 2022-12-10 01:20 178阅读 0赞

# 创建组件 #

在/components目录下创建tabBar.vue

<template>
      <div class="barBar-container">
        <div
          class="barBar-item"
          v-for="(item ,index) in tabBarImg"
          :key="index"
          @click="switchToTab(item.path)"
        >
          <img :src="$route.name === item.name ? item.activity : item.normal" alt />
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "tabBar",
      props: {},
      data() {
        return {
          tabBarImg: [
            {
              path: "/",
              name: "index",
              normal: require("../src/assets/img/home.png"),
              activity: require("../src/assets/img/home_t.png"),
              title: "订单",
            },
            {
              path: "/me",
              name: "me",
              normal: require("../src/assets/img/info.png"),
              activity: require("../src/assets/img/info_c.png"),
              title: "我的",
            },
          ],
        };
      },
      methods: {
        switchToTab(path) {
          this.$router.push(path);
        },
      },
    };
    </script>
    <style lang="less">
    .barBar-container {
      width: 100vw;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      .barBar-item {
        padding: 0.5rem;
        img {
          width: 3rem;
          height: 3rem;
        }
      }
    }
    </style>

在/src/router目录下index.js

import Vue from "vue";
    import Router from "vue-router";
    Vue.use(Router);
    export default new Router({
      routes: [
        {
          path: "/",
          name: "index",
          component: () => import("@/views/Index.vue"),
          meta: {
            title: "首页",
            tab: true
          }
        },
        {
          path: "/me",
          name: "me",
          component: () => import("@/views/me.vue"),
          meta: {
            title: "个人页",
            tab: true
          }
        }    
      ]
    });

在/src/main.js添加

// 引入全局自定义组件
    import tabBar from "../components/tabBar.vue";
    Vue.component("tabBar", tabBar);

在/src/app.vue中使用

<template>
      <div id="app">
        <div class="page-container">
          <router-view />
        </div>
        <tabBar v-if="$route.meta.tab"></tabBar>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {};
      },
      created() {},
      methods: {},
    };
    </script>
    
    <style lang="less">
    #app {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      .page-container {
        flex: 1;
        width: 100vw;
        overflow: auto;
      }
    }
    </style>