原生JS封裝vue Tab切換效果

Posted on by

本文實例為大傢分享瞭原生JS封裝vue Tab切換的具體代碼，供大傢參考，具體內容如下

先看效果圖

使用的技術

vue,js,css3

vue組件 可以直接使用

<template>
  <div class="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
        書友
      </li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
        書單
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      headerActive: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    //初始化拋發
    this.$emit("change", this.headerActive);
  },
  methods: {
    headerChange(index) {
      this.headerActive = index;
      this.$emit("change", index);
    },
  },
};
</script>

<style lang="less" scoped>
.bookcircle-header {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 286px;
    font-size: 14px;
    height: 29px;
    color: #1489fe;
    border: 1px solid #1489fe;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; // 解決邊框溢出，將border包含在盒子內部
    li {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .active {
      color: white;
    }
    &::before {
      content: "";
      width: 143px;
      height: 100%;
      background-color: #1489fe;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 13px 0px 0px 13px;
      z-index: 1;
      transition: all 0.3s;
    }
    &.firend::before {
      transform: translateX(0);
      border-radius: 13px 0px 0px 13px;
    }
    &.booklist::before {
      transform: translateX(100%);
      border-radius: 0px 13px 13px 0px;
    }
  }
}
</style>

實現原理：

使用ul,li以及彈性盒子，首先給父元素設置寬高，然後通過彈性盒子將子元素 li 水平方向展開， 給子元素 li 設置 flex：1,讓子元素平分父元素的寬。

然後給父元素設置偽元素，以絕對定位的方式覆蓋第一個 li 元素， 通過z-index屬性，控制偽元素和子元素的層級顯示關系。

然後給偽元素設置 transition 屬性 搭配 transform: translateX(); 屬性，讓元素水平移動就可以瞭

註意點：

1、雖然切換的點擊事件在子元素上，並且也給子元素添加 瞭active樣式，但tab的切換效果並不是通過子元素來實現的，而是通過父元素的偽元素來實現切換效果。
2、必須要根據子元素的 index 給父元素設置動態class, 這樣父元素的偽元素才能根據選中的子元素執行切換動畫
3、本組件使用的是 淘寶amfe-flexible、 postcss適配，使用時註意適配問題

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：