Vue tab switch切换效果

  <template>
    <div>
      <div class="switch-box" :style="{ '--translatex': translatex }">
        <div
          v-for="(item, index) in type"
          :key="index"
          @click="switchType(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        translatex: "0px",
        type: [{ name: "tab1" }, { name: "tab2" }],
      };
    },
    methods: {
      switchType(index) {
        if (index === 0) {
          this.translatex = `0px`;
        } else if (index === 1) {
          this.translatex = `100px`;
        }
      },
    },
  };
  </script>

  <style lang="less" scoped>
  .switch-box {
     200px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    background-color: white;
    > div {
       100px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      text-align: center;
      cursor: pointer;
      z-index: 1;
    }
    position: relative;
  }

  .switch-box::after {
    content: "";
    position: absolute;
    background-color: skyblue;
    border-radius: 20px;
     100px;
    height: 100%;
    transform: translateX(var(--translatex));
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 0;
  }
</style>