ネイティブ JS カプセル化 vue タブ切り替え効果

<テンプレート>
  <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>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  コンポーネント: {},
  データ（） {
    戻る {
      ヘッダーアクティブ: 0,
    };
  },
  計算: {},
  作成された() {},
  マウント() {
    //送信を初期化します。this.$emit("change", this.headerActive);
  },
  メソッド: {
    ヘッダー変更(インデックス) {
      this.headerActive = インデックス;
      this.$emit("change", インデックス);
    },
  },
};
</スクリプト>

<style lang="less" スコープ>
.bookcircle-header {
  高さ: 42px;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  .ラッパー{
    幅: 286ピクセル;
    フォントサイズ: 14px;
    高さ: 29px;
    色: #1489fe;
    境界線: 1px 実線 #1489fe;
    境界線の半径: 14px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    位置: 相対的;
    box-sizing: border-box; // 境界のオーバーフローを解決し、ボックス内に境界を含める li {
      フレックス: 1;
      高さ: 100%;
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      zインデックス: 2;
    }
    。アクティブ {
      色: 白;
    }
    ＆：：前に {
      コンテンツ： "";
      幅: 143ピクセル;
      高さ: 100%;
      背景色: #1489fe;
      位置: 絶対;
      上: 0px;
      左: 0px;
      境界線の半径: 13px 0px 0px 13px;
      zインデックス: 1;
      遷移: すべて 0.3 秒;
    }
    &.firend::before {
      変換: translateX(0);
      境界線の半径: 13px 0px 0px 13px;
    }
    &.booklist::before {
      変換: translateX(100%);
      境界線の半径: 0px 13px 13px 0px;
    }
  }
}
</スタイル>