Vue.js如何在宽度变化时观看元素currentStyle

Question

我有一个菜单组件和componentA，但是我想观察菜单在组件A中展开和折叠的时间。

我在componentA数据属性中定义了menuWatcher

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之类的事情。这很糟糕，原因有几个。

我会去

在菜单组件上，我将菜单的状态绑定到一个变量。 这给表带来了两件事：

• 以编程方式切换styles
• 将状态props传递给孩子

您可以查看此fiddle。我为您打算的内容写了原始版本。