访问指令中"computed style"的元素

Question

我为这个加载器的东西做了一个指令。我想做下面这样的事情，但所有样式都是未定义的。有没有办法访问指令中元素的"计算样式"？

export const ElementLoader = {
  componentUpdated(el, binding) {
    if (binding.value.isLoading) {
      if (el.style.position !== '' || el.style.position !== 'static') {
        el.style.position = 'relative'
      }
      el.classList.add('is-loading')
    } else {
      el.classList.remove('is-loading')
    }
  }
}

Answer 1

Vue.js 没有为此提供任何开箱即用的东西。为此，您必须使用核心 JavaScript API：

componentUpdated(el, binding) {
    const styleObj = window.getComputedStyle(el);
    // Other code...
}

Answer 2

如果你真的需要它在指令风格中，这不是解决方案，但在这种情况下，你总是可以动态地 v-bind 一个属性 CSS 类。

请参见： 类和样式绑定