如何将 Vue 组件属性中的值传递到组件的 SCSS？答案

【问题标题】：How to pass a value from a Vue component attribute into the component's SCSS?如何将 Vue 组件属性中的值传递到组件的 SCSS？
【发布时间】：2020-02-21 17:11:12
【问题描述】：

到目前为止，我有一个由伪类 ::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 中使用，如下所示：

$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”，这将允许我传递给定的值，例如offset="16px"，并将该值发送到 tooltip-placement-#{$placement} 和 triangle-placement-#{$placement} 中的变换属性以调整工具提示的平移，如下所示：

transform: translate(-50%, offsetValue)

但我不确定如何将我已经知道的知识应用到这个新方法中，或者这样的实现是可能的。

有什么线索吗？

【问题讨论】：

标签： vue.js sass attributes vue-component

【解决方案1】：

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

希望这会有所帮助！

【讨论】：