vue封装TabBar组件的完整步骤记录

下面详细讲解“Vue封装TabBar组件的完整步骤记录”的攻略。

步骤一: 创建项目

首先，在终端里创建Vue项目，可以使用Vue官方的脚手架Vue CLI来快速创建项目。在命令行中执行以下命令：

vue create my-project

“my-project”是你项目的名称，根据实际情况进行替换。

步骤二：创建组件

在项目的组件目录中（一般是/src/components/），创建一个名为TabBar.vue的组件，在该组件中实现TabBar组件的逻辑。

<template>
  <div class="tab-bar">
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="{ active: activeIndex === index }"
      class="tab-item"
      @click="handleItemClick(index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleItemClick(index) {
      this.$emit('change', index)
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-between;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tab-item.active {
  color: #007aff;
}
</style>

以上代码实现了一个简单的TabBar组件，可以接受一个items属性表示TabBar中的各个项，activeIndex表示当前选中的项。点击TabBar的某个项会触发一个change事件，通过$emit把选中的项的索引值传递出去。

步骤三：使用组件

在项目中使用我们刚才实现的TabBar组件。可以在App.vue（或其他需要TabBar的组件页面）中引入组件，并设置好TabBar的每一项的label和对应的路由地址。示例如下：

<template>
  <div id="app">
    <tab-bar :items="items" :active-index="activeIndex" @change="handleTabChange" />
    <router-view />
  </div>
</template>

<script>
import TabBar from './components/TabBar.vue'

export default {
  name: 'App',
  components: {
    TabBar
  },
  data() {
    return {
      activeIndex: 0,
      items: [
        { label: '首页', path: '/' },
        { label: '分类', path: '/category' },
        { label: '购物车', path: '/cart' },
        { label: '我的', path: '/me' }
      ]
    }
  },
  methods: {
    handleTabChange(index) {
      this.activeIndex = index
      this.$router.push(this.items[index].path)
    }
  }
}
</script>

在以上代码中，我们使用了Vue Router来实现TabBar组件的导航功能，当TabBar中某一项被选中时，会自动跳转到对应的路由地址。当然，你也可以根据自己的需求，选择不同的导航方式。

示例一：移动端TabBar

以下是一个移动端TabBar的示例：

<template>
  <div class="tab-bar">
    <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="tab-item"
        :class="{'active': activeIndex === index}"
        @click="$emit('change', index)"
      >
        <div :class="getIconClass(item.icon)">
          <i :class="item.icon"></i>
        </div>
        <div class="tab-label">{{item.title}}</div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    getIconClass(icon) {
      return ['tab-icon', icon]
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all .3s;
}

.tab-item.active {
  color: #007aff;
}

.tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 22px;
  height: 22px;
}

.tab-label {
  margin-top: 3px;
}
</style>

在以上代码中，我们使用了getIconClass方法来获取每一个Tab项的icon类名，添加到样式中来显示对应的图标。同时，我们使用了CSS3的transition属性，使TabBar的切换更加平滑。列表项的样式可以根据实际需求自己进行更改。

示例二：PC端TabBar

以下是一个PC端的TabBar示例：

<template>
  <div class="tab-bar">
    <ul>
      <li 
          v-for="(item, index) in items" 
          :key="index" 
          class="tab-item"
          :class="{'active': activeIndex === index}"
          @click="$emit('change', index)"
        >
          {{ item.title }}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.tab-bar {
  height: 60px;
  background-color: #f2f2f2;
  border-top: 1px solid #ddd;
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.tab-item {
  margin: 0 20px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all .3s;
}

.tab-item.active {
  color: #007aff;
}
</style>

在以上代码中，我们使用了一个ul列表来展示TabBar的各项，每一项的样式可以自己根据实际需求进行更改。

至此，我们已经完成了一个基本的TabBar组件的封装，可以适用于不同场景的展现。