Vue 中用 HTML + CSS 实现 Tabs 标签页绘制

上一篇博客介绍了Vue 中用 HTML + CSS 实现导航按钮动画绘制，这一篇介绍绘制 Tabs 标签页的过程，先看效果：
默认是 Tab1 亮起

鼠标指针滑到 Tab2，Tab2亮起

点击 Tab3，Tab3 亮起

绘制过程很简单，最重要的是用到了 border-bottom，相比其他复杂的实现过程看起来更为容易，希望能帮助到自己画 Tabs 标签页的朋友们。其实画起来不是很困难，大家一定要一行代码一行代码亲自试试！多调一调就能有自己的收获

<template>
    <div class="tabBarArea">
        <div class="tabBarBtn" :class="[tabName=='Tab1'?'tabBarBtnActive':'']"
             @click="tabName='Tab1'">Tab1</div>
        <div class="tabBarBtn" :class="[tabName=='Tab2'?'tabBarBtnActive':'']"
             @click="tabName='Tab2'">Tab2</div>
        <div class="tabBarBtn" :class="[tabName=='Tab3'?'tabBarBtnActive':'']"
             @click="tabName='Tab3'">Tab3</div>
        <div class="tabBarBtn" :class="[tabName=='Tab4'?'tabBarBtnActive':'']"
             @click="tabName='Tab4'">Tab4</div>
    </div>
</template>

<script>
export default {
  name: 'TabsPractice',
  data() {
    return {
      tabName: 'Tab1',
    };
  },
};
</script>
<style scoped>
  .tabBarArea {
    padding-top: 20px;
    position: relative;
  }
  .tabBarArea:after{
    display: block;
    content: '';
    clear: both;
  }
  .tabBarBtn {
    float: left;
    margin-left: 30px;
    cursor: pointer;
    padding: 2px 10px;
  }
  .tabBarBtn:hover {
    color: #326BE8;
    border-bottom: 2px solid #326BE8;
    border-top:0px;
    border-left:0px;
    border-right:0px;
  }
  .tabBarBtnActive {
    color: #326BE8;
    border-bottom: 2px solid #326BE8;
    border-top:0px;
    border-left:0px;
    border-right:0px;
  }
  .tabBarBtnActive:hover {
    color: #326BE8;
  }
</style>