如何在方法内部进行动态伪类宽度计算？

Question

我想构建一个步进器组件（尽量避免使用包）。我使用纯 HTML 模板和 CSS 创建了它，我想根据 x 数字调整 ::before 元素的大小。

类似width: ${100% / 4}。我使用方法尝试了这种方法并得到了渲染错误。是否有可能做到这一点？或者还有其他方法可以做到这一点？

请看我的脚本：

<template>
  <div class="c-stepper">
    <div class="step-item" :style="drawLinePrecision(4)" v-for="item in 4" :key="item">
      <div class="step-marker">
        <i class="icon icon-duotones-check"></i>
      </div>
      <div class="step-info">
        <p class="step-title">Step 1</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    methods: {
        drawLinePrecision(length) {
            return `.step-item:not(:last-child)::before {
                content: "";
                height: 3px;
                width: ${(100% / length)};
                position: absolute;
                top: 25%;
                background-color: $primary;
            }`
        }
    }
}
</script>
<style lang="scss" scoped>
  @import "../../sass/variables";

  .c-stepper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5rem 0rem;
    position: relative;

    .step-item {
      &:not(:last-child)::before {
        content: "";
        height: 3px;
        width: calc(100% / 4);
        position: absolute;
        top: 25%;
        background-color: $primary;
      }
      .step-marker {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: white;
        border: 3px solid $primary;
        border-radius: 50%;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
</style>

Answer 1

经过一些变通方法后，我刚刚找到了解决方案。而不是那样做，我不得不将.step-item 的宽度固定为 100% except 最后一个孩子并将position: relative; 从父级移动到step-item自己。

现在，我只需要从显示c-stepper 组件的父组件设置填充。

这是我的脚本：

<template>
  <div class="c-stepper">
    <div class="step-item" v-for="item in 11" :key="item">
      <div class="step-marker">
        <i class="icon icon-duotones-check"></i>
      </div>
      <div class="step-info">
        <p class="step-title">Step 1</p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import "../../sass/variables";

  .c-stepper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5rem 0rem;

    .step-item {
      margin: 0px auto;
      position: relative; // step item must be relative

      &:not(:last-child) {
        width: 100%; // make it fixed
      }

      &:not(:last-child)::before {
        content: "";
        height: 3px;
        width: 100%; // make it 100% width so that it won't let any gap to be rendered in the ui
        position: absolute;
        top: 25%;
        background-color: $primary;
      }
      .step-marker {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: white;
        border: 3px solid $primary;
        border-radius: 50%;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
</style>