Вуйс, как смотреть элемент currentStyle по изменениям ширины

Question

У меня есть компонент меню и компонент A, но я хочу посмотреть, когда меню развернется и свернется в компоненте A.

Я определил menuWatcher в атрибуте данных componentA

const ComponentA = {
    data:function(){
        return {
          menuWatcher:(document.getElementById('menu-area').currentStyle || window.getComputedStyle(document.getElementById('menu-area')))
        };
    },
    watch:{
        "menuWatcher.width"(width){
            alert(width);
        }
    }
};

Когда я раскрываю и сворачиваю меню, ожидаю, что наблюдатель предупредит ширину, но это не работает.

Пожалуйста, кто-нибудь может предложить лучший способ решения этой проблемы.

Answer 1

Я не рекомендую делать такие вещи, как document.getElementById('menu-area').currentStyle. Это плохо по нескольким причинам.

Я бы пошел на:

В компоненте меню я бы привязал состояние меню к переменной. Это приносит две вещи к столу:

• программное переключение стилей
• прохождение состояния как реквизита детям

Вы можете посмотреть на эту скрипку . Я набросал примитивную версию твоего намерения.