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属性动态绑定到CSS类。

See: Class and style bindings

在指令中访问元素“计算样式”

2 个答案: