Доступ к элементам «вычисленный стиль» в директиве
Я сделал директиву для этого загрузчика. Я хочу сделать что-то вроде ниже, но все стили не определены. Есть ли способ получить доступ к «вычисленным стилям» элемента в директиве?
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')
}
}
}
element.style возвращает стили, определенные внутри атрибута встроенного стиля, для вычисляемых стилей вам необходимо использовать window.getComputedStyle
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Vue.js не предоставляет для этого ничего из коробки. Для этого вы должны использовать ядро JavaScript API:
componentUpdated(el, binding) {
const styleObj = window.getComputedStyle(el);
// Other code...
}
Если вам действительно нужно это в директивном стиле, это не решение, но вы всегда можете динамически привязать свойство v, в данном случае это класс CSS.
См.: Привязки классов и стилей.
Есть ли причина, по которой это не хорошо? Мне нужно проверить текущий стиль, прежде чем я смогу добавить класс. Также это загрузчик, который стал общим для всех элементов.
Нет, ни за что, просто директивный стиль изначально не реализован во Vue. Вы всегда можете выбрать собственный маршрут в любое время.
Хорошо, да, я думал об этом, и у меня действительно не было другого способа сделать это. Мне нужно проверить, какой у него стиль, а затем действовать в соответствии с ним. Это также должно быть общее решение практически для всех компонентов/элементов. Спасибо за ответ Луис :)
В любой момент. Рад помочь в любом случае.
так что добавляйте
window.getComputedStyle(el)?? или что-то, что vue использует для глобального окна