Как передать значение из атрибута компонента 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 следующим образом:

$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», и отправить это значение в свойства преобразования в всплывающей подсказке. размещение - # {$ размещение} и размещение треугольника - # {$ размещение} для настройки перевода всплывающей подсказки, например так:

transform: translate(-50%, offsetValue)

, но я не уверен, как применить то, что я уже знаюв этой новой методологииили такая реализация даже возможна.

Есть какие-нибудь подсказки?

Answer 1

Вы не можете передавать значения в SCSS. Что вы можете сделать, это определить пару различных переменных смещения в SCSS и условно применить их, добавляя или удаляя классы. Реализация может быть немного многословной, но она должна работать.

Надеюсь, это поможет!