时间戳

首页 > 解决方案 > 如何将 Vue 组件属性中的值传递到组件的 SCSS？

vue.js - 如何将 Vue 组件属性中的值传递到组件的 SCSS？

问题描述

到目前为止，我有一个由伪类 ::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.jssassattributesvue-component

解决方案

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

希望这可以帮助！

推荐阅读