vue tab标签

Posted sx122

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue tab标签相关的知识,希望对你有一定的参考价值。

最近做个项目,需要像淘宝秒杀页那样的tab标签,可滑动可点击的,就自己做了个组件记录一下

<template>
  <div class="tab" :style="{background:background}" ref="scroll">
    <div class="navCon" :style="{width:width*nav.length+‘px‘,height:height+‘px‘}">
      <div
        v-for="(item, index) in nav"
        :key="index"
        class="navList"
        :style="{width:width+‘px‘}"
        @click="toLeft(index)"
      >
        <p
          :style="{color:index==pitch?active_color:color,‘font-size‘:sizi+‘px‘,height:list_1.length?‘50%‘:‘100%‘}"
          class="title"
        >
          <span>{{item}}</span>
        </p>
        <p class="title1" v-if="list_1.length">
          <span>{{list_1[index]}}</span>
        </p>
      </div>
    </div>
  </div>
</template>
export default {
  data() {
    return {
      pitch:this.active
    };
  },
  props: {
    nav:{
      type: Array,
      default: ()=>{
        return ["标签一","标签二","标签三","标签四","标签五","标签六","标签七","标签八"]
      }
    },
    active: {
      //唯一标识符
      type: Number,
      default: 0
    },
    background: {
      //背景颜色
      type: String,
      default: "red"
    },
    width: {
      //
      type: String,
      default: "76"
    },
    active_color: {
      // 选中字体颜色
      type: String,
      default: "#fff"
    },
    color: {
      // 字体颜色
      type: String,
      default: "#ccc"
    },
    sizi: {
      // 字体大小一
      type: String,
      default: "16"
    },
    list_1: {
      // 数据列表
      type: Array,
      default: function() {
        return [];
      }
    },
    height: {
      //
      type: String,
      default: "44"
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.active > 2 && this.active <= this.nav.length - 3) {
        this.$refs.scroll.scrollLeft = (this.active - 2) * this.width;
      }
    });
  },
  mounted() {},
  methods: {
    toLeft(index) {
      this.pitch=index
        this.$emit(‘change‘,index)
      if (index <= 2) {
        this.$refs.scroll.scrollLeft = "0";
        return;
      } else if (index >= this.nav.length - 3) {
        this.$refs.scroll.scrollLeft = this.width * (this.nav.length - 3);
      } else {
        this.$refs.scroll.scrollLeft = this.width * (index - 2);
      }
    }
  }
};
</script>
<style scoped>
.tab {
  width: 100%;
  height: 88px;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.navCon {
  height: 100%;
}
.navList {
  float: left;
  height: 100%;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title1 {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>

 ----最后希望大神指点指点----

以上是关于vue tab标签的主要内容,如果未能解决你的问题,请参考以下文章

vue element-ui Tabs 标签页实现更多功能

前端Vue项目:旅游App-city:搜索框search和标签页Tabs

Vue实现简单Tab标签页组件

标签视图中的 Android 操作栏搜索

片段存储和重用:使用TabView的多个子片段

vue tab标签