vue里的tab标签

<template>
  <div class="Test2">
    <div class="tabs_wrap" v-model="mytabActive">
      <div class="tabs_line"></div>
      <div class="tab" name="0" @click="changeTab(0)">目录</div>
      <div class="tab" name="1" @click="changeTab(1)">简介</div>
      <div class="tab" name="2" @click="changeTab(2)">评论</div>
      <div class="tab" name="3" @click="changeTab(3)">相关课程</div>
    </div>
    <div class="tabContent">
      <div class="tab_pane">11111111</div>
      <div class="tab_pane">222222</div>
      <div class="tab_pane">3333333333</div>
      <div class="tab_pane">4444444444</div>
    </div>
  </div>
</template>
<script>
import { conf } from "../assets/js/main"

export default {
  name: 'Test2',
  components: {


  },
  data() {
    return {
       mytabActive: 0
    }
  },
  created() {

  },
  mounted() {
    conf.setTitle('登录');
    this.tabStyle();
  },
  beforeDestroy() {},

  methods: {
    tabStyle() {
      var tabWidth = $('.tab').eq(0).width();
      $('.tab').eq(this.mytabActive).css('color','#323232')
      $('.tabs_line').css('width', tabWidth * 0.6 + 'px');
      $('.tabs_line').css("transform", "translateX(" + tabWidth * 0.2 + "px)");
      $('.tabs_pane').eq(this.mytabActive).show();

    },
    changeTab(index) {
      var tabWidth = $('.tab').eq(index).width();
      $('.tabs_line').css('width', tabWidth * 0.6 + 'px');
      var num = tabWidth * index + tabWidth * 0.2;
      $('.tabs_line').css({ "transform": "translateX(" + num + "px)"});
      $('.tab_pane').hide().eq(index).show();
    },
    //提示
    tips(text) {
      conf.toast(text)
    }
  } //end enthods
}

</script>
<style lang="less" scoped>
.tabs_wrap {
  .width100();
  display: flex;
  user-select: none;
  position: relative;
  background-color: #fff;
  position: relative;
  height: 44px;

  .tab {
    flex: 1;
    text-align: center;
    color:#7d7e80;
    font-size: 28/75rem;
  }
}

.tab_pane {
  display: none;
}

.tabs_line {
  z-index: 1;
  left: 0;
  bottom: 15px;
  height: 2px;
  position: absolute;
  border-radius: 2px;
  background-color: #f44;
  transition-duration: 0.3s;
}

</style>

转载于:https://www.cnblogs.com/hyx626/p/10517641.html