如何将值从Vue组件属性传递到组件的SCSS？

Question

到目前为止，我有一个由伪类:: before和:: after组成的工具提示组件，它们根据出现在其上的页面上赋予该属性的属性而围绕一个元素定位。例如，这是一个工具提示出现在元素的左上方，并在x方向上单行增长：

工具提示和元素如下显示在其页面中：

<ui-tooltip class="flex-1 lg:mr-16" color="indigo" placement="bottom-left" overflow="grow-x">
  <template #tooltip>Really Long Release Title Potentially Overflowing</template>
    <div class="bg-indigo-5 py-2 rounded text-center">
      <h6>
        Really Long Release Title Potentially Overflowing
      </h6>
    </div>
</ui-tooltip>

随后在组件SCSS中利用这些属性“ placement”和“ overflow”，如下所示：

$positions: (top, bottom, left, right, top-left, bottom-left, top-right, bottom-right);

@each $placement in $positions {
  &[placement="#{$placement}"] {
    &::after {
      @extend .tooltip-placement-#{$placement};
    }

    &::before {
      @extend .triangle-placement-#{$placement};
    }
  }
}

等等：

.tooltip-placement-bottom-left, .triangle-placement-bottom-left {
    left: 0%;
    transform-origin: top;
    transform: translate(-50%, 0);
}

.tooltip-placement-bottom-left {
    top: calc(100% + 16px);

    &[overflow="grow-x"] {
        transform-origin: top left;
        transform: translate(-30px, 0);
    }
}

.triangle-placement-bottom-left {
    top: calc(100% - 8px);
    border-width: 12px 10.3923048454px;
    border-bottom-color: var(--tooltip-color);
}

我想做的是在此工具提示中添加第三个属性，称为“偏移”，这将允许我传递给定值，例如offset =“ 16px”，然后将该值发送到tooltip-placement-＃{$$ placement}和triangle-placement-＃{$$ placement}中的转换属性，以调整工具提示的转换，如下所示：

transform: translate(-50%, offsetValue)

但是我不确定如何将我已经知道的东西应用到这种新方法中，或者甚至可以实现。

有任何线索吗？

Answer 1

您无法将值传递到SCSS。您可以做的是在SCSS中定义几个不同的偏移量变量，并通过添加或删除类有条件地应用它们。该实现可能有些冗长，但应该可以。

希望这会有所帮助！