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;
        }
      }
  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值