vue 实现 tab 栏切换

小段视频展示tab栏效果

tab栏切换演示.wmv

代码展示：

<template>
  <div class="tab">
    <div class="tabwrapper" @mouseleave="handleleave">
      <div class="left">
        <ul>
          <li
            v-for="(item, index) of citylist"
            :key="index"
            @mouseenter="handleenter(index)"
            :class="{
              active: currentindex == index,
            }"
          >
            <span>{{ item.type }}</span
            ><i></i>
          </li>
        </ul>
      </div>
      <div class="right" v-if="isshow">
        <ul>
          <li v-for="(v, i) of citylist[currentindex].children" :key="i">
            <strong>{{ i + 1 }}</strong>
            <span>{{ v.city }}</span>
            <i>{{ v.desc }}</i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      isshow: false,
      currentindex: 99,
      citylist: [],
    };
  },
  created: function () {
    this.getcity();
  },
  methods: {
    handleenter: function (index) {
      this.currentindex = index;
      this.isshow = true;
    },
    handleleave: function () {
      this.currentindex = 99;
      this.isshow = false;
    },
    getcity: function () {
      this.$axios({
        url: "/posts/cities",
      }).then((res) => {
        console.log(res.data);
        this.citylist = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tab {
  padding: 200px 40px;
}
.tabwrapper {
  box-sizing: border-box;
  position: relative;
  width: 620px;
  .left {
    position: relative;
    box-sizing: border-box;
    width: 260px;
    border: 1px solid #999;
    border-right: none;
    border-bottom: none;
    z-index: 2;
    ul > li {
      box-sizing: border-box;
      width: 260px;
      height: 41px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      &.active {
        border-right-color: #fff;
        color: orange;
        i {
          border-color: orange;
        }
      }
      // &:hover {
      // color: orange;
      // border-right-color: #fff;
      //   i {
      //     border-color: orange;
      //   }
      // }
      i {
        width: 14px;
        height: 14px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg);
      }
    }
  }
  .right {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 260px;
    border: 1px #999 solid;

    ul > li {
      width: 360px;
      height: 42px;
      display: flex;
      align-items: center;
      strong {
        display: inline-block;
        margin-left: 20px;
        color: orange;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        color: orange;
      }
      i {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
}
</style>

完成tab栏切换的注意点：

1. 用mouseenter
mouseover与mouseenter的区别
Mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。mouseover/mouseout事件支持冒泡，绑定的事件会冒泡到子标签上。
Mouseenter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2.要实现点击左边的li，右边框消失，利用左边的盒子的右边框与右边的盒子的左边框重叠，左边的盒子的z-index更大。

&.active {
        border-right-color: #fff;
        color: orange;
        i {
          border-color: orange;
        }
      }

附上json

{
    "data": [
        {
            "type": "热门城市",
            "children": [
                {
                    "city": "北京",
                    "desc": "世界著名古都和现代化国际城市"
                },
                {
                    "city": "广州",
                    "desc": "粤港澳大湾区、泛珠江三角洲经济区"
                },
                {
                    "city": "上海",
                    "desc": "长江入海口，东隔东中国海"
                },
                {
                    "city": "成都",
                    "desc": "国家历史文化名城"
                },
                {
                    "city": "西安",
                    "desc": "中国国际形象最佳城市之一"
                }
            ]
        },
        {
            "type": "推荐城市",
            "children": [
                {
                    "city": "青岛",
                    "desc": "滨海度假旅游城市"
                },
                {
                    "city": "杭州",
                    "desc": "西湖十景"
                },
                {
                    "city": "深圳",
                    "desc": "世界影响力的创新创意之都"
                },
                {
                    "city": "广州",
                    "desc": "粤港澳大湾区、泛珠江三角洲经济区"
                },
                {
                    "city": "成都",
                    "desc": "国家历史文化名城"
                }
            ]
        },
        {
            "type": "奔向海岛",
            "children": [
                {
                    "city": "秦皇岛",
                    "desc": "驰名中外的旅游休闲胜地"
                },
                {
                    "city": "青岛",
                    "desc": "滨海度假旅游城市"
                },
                {
                    "city": "珠海",
                    "desc": "浪漫之城，百岛之市"
                },
                {
                    "city": "深圳",
                    "desc": "世界影响力的创新创意之都"
                },
                {
                    "city": "海口",
                    "desc": "海滨自然旖旎风光"
                }
            ]
        },
        {
            "type": "主题推荐",
            "children": [
                {
                    "city": "海口",
                    "desc": "海滨自然旖旎风光"
                },
                {
                    "city": "广州",
                    "desc": "粤港澳大湾区、泛珠江三角洲经济区"
                },
                {
                    "city": "上海",
                    "desc": "长江入海口，东隔东中国海"
                },
                {
                    "city": "珠海",
                    "desc": "浪漫之城，百岛之市"
                },
                {
                    "city": "西安",
                    "desc": "中国国际形象最佳城市之一"
                }
            ]
        }
    ]
}