访问指令中的元素 "computed style"
Access a elements "computed style" in directive
我为这个加载程序做了一个指令。我想做类似下面的事情,但所有样式都未定义。有没有办法访问指令中元素的"computed styles"?
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')
}
}
}
Vue.js 没有为此提供任何开箱即用的东西。您必须为此使用核心 JavaScript API:
componentUpdated(el, binding) {
const styleObj = window.getComputedStyle(el);
// Other code...
}
如果你真的需要指令样式,那么这不是解决方案,但你总是可以动态地 v-bind 属性 在这种情况下 CSS Class。
我为这个加载程序做了一个指令。我想做类似下面的事情,但所有样式都未定义。有没有办法访问指令中元素的"computed styles"?
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')
}
}
}
Vue.js 没有为此提供任何开箱即用的东西。您必须为此使用核心 JavaScript API:
componentUpdated(el, binding) {
const styleObj = window.getComputedStyle(el);
// Other code...
}
如果你真的需要指令样式,那么这不是解决方案,但你总是可以动态地 v-bind 属性 在这种情况下 CSS Class。