原生JS封裝vue Tab切換效果

更新時(shí)間：2021年04月28日 11:35:41 作者：前端學(xué)徒Slogan

這篇文章主要為大家詳細(xì)介紹了原生JS封裝vue Tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了原生JS封裝vue Tab切換的具體代碼，供大家參考，具體內(nèi)容如下

先看效果圖

使用的技術(shù)

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() {
    //初始化拋發(fā)
    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包含在盒子內(nèi)部
    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>

實(shí)現(xiàn)原理：

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

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

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

注意點(diǎn)：

1、雖然切換的點(diǎn)擊事件在子元素上，并且也給子元素添加了active樣式，但tab的切換效果并不是通過子元素來實(shí)現(xiàn)的，而是通過父元素的偽元素來實(shí)現(xiàn)切換效果。
2、必須要根據(jù)子元素的 index 給父元素設(shè)置動態(tài)class, 這樣父元素的偽元素才能根據(jù)選中的子元素執(zhí)行切換動畫
3、本組件使用的是淘寶amfe-flexible、 postcss適配，使用時(shí)注意適配問題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: