2021-04-02

最新推荐文章于 2021-11-10 17:26:45 发布

zero-小千妹

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量76

点赞数

分类专栏： Tab 文章标签： vue

本文链接：https://blog.csdn.net/weixin_50567521/article/details/115395363

版权

Tab 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Tab栏切换

我们做tab栏的时候会有图标也要随着改变。（上下图标）

<div class="tabs">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            :class="['tab-box', currentIndex == index ? 'active' : '']"
            @click="change(index)"
          >
            {{$t(item.label)}}
            <span style="float: right; margin-right: 20px;">
              <img src="../../assets/unfold.svg" alt="" v-show="currentIndex!=index">
            </span>
             <span style="float: right; margin-right: 20px;">
              <img src="../../assets/close.svg" alt="" v-show="currentIndex==index">
            </span>
          </div>
        </div>

.tabs {
  display: flex;
  justify-content: space-between;
  margin: 30px 0px;
  .tab-box {
    float: left;
    width: 560px;
    height: 56px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #334164;
    line-height: 3;
    padding-left: 20px;
  }
}
.active {
  background: #f08c1b;
  color: #fff !important;
}

 data() {
    return {
      currentIndex: 0,
      flag: false,
      tabList: [
        { label: "serveP.label1"
        },
        { label: "serveP.label2"
        }
      ],
    };
  },
  methods: {
    change: function (index) {
      this.currentIndex = index;
    },
  },