javascript - Vue 3 在安装之前访问 DOM 元素

Question

我正在创建一个 Vue <Link> NuxtJS 中的组件使用新的组合 API 语法。我想自动设置 color我的UiIcon当模板的根有 disabled类。

我首先想到了这种方法，但后来我意识到在设置方法中，DOM 尚不可访问。另一个可行的解决方案是什么？

PS:设法使用 CSS 解决 stroke属性因为UiIcon是一个 SVG 但我很好奇是否有另一种解决方案利用 color pop 已经定义。

<template>
  <div ref="row" class="row">
    <UiIcon
      v-if="linkIcon"
      :type="linkIcon"
      :color="linkIconColor"
      class="icon"
    />
    <a
      class="link"
      :href="linkHref"
      :target="linkTarget"
      :rel="linkTarget === 'blank' ? 'noopener noreferrer' : null"
      @mouseover="linkActive = true"
      @mouseout="linkActive = false"
    >
      <slot></slot>
    </a>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  toRefs,
} from '@nuxtjs/composition-api';
import { Colors } from '~/helpers/styles';

export default defineComponent({
  name: 'Link',
  props: {
    href: {
      type: String,
      default: undefined,
    },
    target: {
      type: String as () => '_blank' | '_self' | '_parent' | '_top',
      default: '_self',
    },
    icon: {
      type: String,
      default: undefined,
    },
    iconColor: {
      type: String,
      default: undefined,
    },
    iconHoverColor: {
      type: String,
      default: undefined,
    },
  },
  setup(props) {
    const { href, target, icon, iconHoverColor } = toRefs(props);
    const linkActive = ref(false);
    const row = ref<HTMLDivElement | null>(null);

    const linkIconColor = computed(() => {
      const linkDisabled = row.value?.classList.contains('disabled');

      if (linkDisabled) {
        return Colors.DARK_GREY;
      }
      if (linkActive.value && iconHoverColor.value) {
        return props.iconHoverColor;
      }
      return props.iconColor;
    });

    return {
      linkHref: href,
      linkTarget: target,
      linkIcon: icon,
      linkIconColor,
      linkActive,
    };
  },
});
</script>

Answer 1

根据 Vue documentation beforeUpdate 是在 Updated 钩子(Hook)之前访问 DOM 元素的好地方。但是，您也可以使用 $nextTick 访问 beforeMount 中的 DOM。

 beforeMount() {
  this.$nextTick(function () {
    //code here
  })
}