自己在vue项目中写Tab选项卡

276 阅读1分钟
<div class="topCon">
  <ul>
    <li
      v-for="(item,index) in inTop"
      :class="{activeLi:item.name==surename}"
      @click="clickLi(item)"
      :key="index"
    >{{item.name}}</li>
  </ul>
</div>
    .topCon {
    width: 100%;
    position: fixed;
    top: 68px;
    height: 40px;
    background-color: #d4dbe8;
    left: 200px;
    text-align: left;
    // z-index: 99;
    @media screen and (max-width: 1366px) {
      top: 50px;
    }
    padding-left: 20px;
    box-sizing: border-box;
    overflow: hidden;
    ul {
      position: relative;
    }
    li {
      float: left;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-top: 8px;
      background-color: #e7ebf2;
      margin-right: 3px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      padding: 0 10px;
      color: #6485bc;
      cursor: pointer;
    }
    .activeLi {
      margin-top: 8px;
      background-color: #f0f4fb;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      color: #fbad33;
      font-weight: bold;
      height: 36px;
    }
    }
    methods: {
        // Tab表格的切换
        clickLi(item) {
          //切换导航菜单
          this.surename = item.name;
          if (item.name == "趋势") {
            this.TrendBox = true;
            this.DataBox = false;
            this.TargetBox = false;
            this.Hvalue = [];
            this.QHvalue.push(this.$moment(this.valueData[0]).format("YYYY-MM-DD"));
            this.QHvalue.push(this.$moment(this.valueData[1]).format("YYYY-MM-DD"));
          } else if (item.name == "数据") {
            this.TrendBox = false;
            this.DataBox = true;
            this.TargetBox = false;
            this.Hvalue = [];
            this.Hvalue.push(this.$moment(this.valueData[0]).format("YYYY-MM-DD"));
            this.Hvalue.push(this.$moment(this.valueData[1]).format("YYYY-MM-DD"));
            // this.valueData[0]
            // this.ScrollFun(this.Hvalue);
          } else if (item.name == "目标和报警") {
            this.TrendBox = false;
            this.DataBox = false;
            this.TargetBox = true;
          }
        },
    }