vue tab标签

sx122 2020-03-24 原文

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>