在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中，如何設置一段數據總是等於包含元素的高度？

回答

相關問題