在Vue.js中，如何设置一段数据总是等于包含元素的高度？

我试图将一段数据绑定到始终等于包含元素的高度。其他用户交互造成的高度变化（即窗口大小调整）。在Vue.js中，如何设置一段数据总是等于包含元素的高度？

在计算属性中，当我尝试访问this.$el字段时，元素尚未正确设置。

所以我想知道是否有任何方法优雅地设置一块数据总是等于一个DOM元素的高度。

2015-08-13 Dave

如果你有一个方法来跟踪元素的高度变化，那么你可以将以下（使用Vue.js当然jQuery的）做：

HTML

... 
<body> 
    ... 
    <div v-el='target_element'></div> 
    ... 
</body>

的JavaScript

<script> 
    new Vue({ 
     el: 'body', 
     data: { 
      height: 0 
     }, 
     ready: function() { 
      var self = this; 
      self.height = $(self.$$.target_element).height(); 

      // Here you listen for change in the target div's height 
      // For Example ... 
      $(window).on('resize', function() { 
       self.height = $(self.$$.target_element).height(); 
      }); 
     } 
    }); 
</script>

希望这会有所帮助;）

来源

2015-08-13 12:19:20 kishanterry

感谢答复。我的数据是一棵树（类似于Vue.js树视图示例）。所以，我需要跟踪的元素是嵌套的。在全球范围内使用jQuery可能并不理想。此外，这不仅仅是我需要跟踪的“resize”事件。理想情况下，我想跟踪每次改变时的高度（大部分时间，这是Vue.js改变了元素的高度）。如果我们可以在计算出的属性中访问完成的dom元素（$ el），我觉得我的问题可以解决。 – Dave

@Dave我认为计算的属性是在DOM完成加载之前计算的，这可能是您为什么要获取_element尚未正确设置的原因._，请尝试在''部分中包含Vue.js。使用Vue.js只有大约一个月，所以请原谅我的不确定性;） – kishanterry

在Vue v2中，'ready'已经更改为'mounted'：https：//vuejs.org/v2/guide/migration.html＃ready-更换 – Sphinxxx

我创建了一个指令，该指令将指定组件数据变量绑定到应用该指令的元素的高度（在本例中为宽度）。

我定义的指令观察-height.js：

export default { 
name:'observeHeight', 

inserted:function(el, binding, vnode) { 
    if(binding.arg && vnode.context.hasOwnProperty(binding.arg)) { 
    function emitHeightValue(event) { 
     vnode.context[binding.arg] = el.offsetHeight; 
    } 

    window.addEventListener('resize', emitHeightValue); 
    emitWidthValue(); 
    } 
} 
};

然后该指令适用于组件模板中的HTML元素谁的尺寸要注意以下几点：

<template> 
     <div v-observe-height:myHeightVar></div> 
    </tempate> 
    <script> 
    import observeWidth from 'observe-width'; 
    Vue.directive(observeHeight.name, observeHeight); 

    export default { 
     data() { 
     return { 
      myHeightVar: 0 
     } 
     } 
    } 
    </script>

来源

2017-09-01 15:16:47

在Vue.js中，如何设置一段数据总是等于包含元素的高度？

回答

相关问题