Можно ли отслеживать css переменные с помощью computed?

Question

[Артем Прохоров]

Или по другому как то, в общем как?

Comments

[Aetae]

А зачем тебе? Что бы ты не делал - ты явно заходишь с тыла. Не надо так.

[RAX7]

https://vueuse.org/core/useCssVar/

Answer 1

[Aetae]

Вот по-быстрому накидал в качестви зарядки такой кастомный дерьмохук (который ни в коем случае нельзя использовать в проде, только в целях демонстрации. :) ):

import { Ref, computed, ref, watch, onMounted, onUnmounted } from 'vue';

function isHTMLElement(arg: unknown): arg is HTMLElement {
  return !!arg && arg instanceof HTMLElement;
}

function useCSSVariable(
  variable: string,
  el: HTMLElement | Ref<HTMLElement> = document.documentElement
) {
  if (!variable.startsWith('--')) variable = `--${variable}`;
  if (!isHTMLElement(el)) watch(el, value => (el = value), { immediate: true });

  const prev = ref();

  let timeoutId: number;
  const interval = () => {
    const current = isHTMLElement(el)
      ? getComputedStyle(el).getPropertyValue(variable)
      : null;

    if (current !== prev.value) prev.value = current;

    timeoutId = window.setTimeout(interval, 100);
  };

  onMounted(() => {
    interval();
  });

  onUnmounted(() => {
    clearTimeout(timeoutId);
  });

  return computed<string>({
    set(value) {
      let current: null | string = null;

      if (isHTMLElement(el)) {
        el.style.setProperty(variable, value);
        current = el.style.getPropertyValue(variable);
      }

      if (prev.value !== current) prev.value = current;
    },
    get() {
      return prev.value;
    }
  });
}

Ещё раз - использовать это не надо, это скорее шутка. Что надо - выяснить твою задачу и решать её нормально по-человечески.