使用Masonry.JS和Vue.JS

Question

我知道如何使用masonry.js除了vue。然而，我有問題讓它運行並在vue框架內正確調用。我在創建或準備好的內部調用它，但似乎都沒有正確地形成網格。我怎樣才能得到這個框架內的工作？哦，我在這個腳本之前確實在jQuery中調用了html。以下是我有組件內：

編輯：

我可以看到，磚石被賦予了與JS的高度和改變項目定位絕對影響電網。但是，它沒有正確放置它們。它將它們疊放在彼此之上，而不是像其它的一樣，應該在網格中。

<template> 
    <div class="projects--container"> 
    <div class="inner-section inner--options"> 
     <div class="grid"> 
      <div class="grid-item"></div> 
      <div class="grid-item"></div> 
      <div class="grid-item"></div> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
export default{ 
    ready: function() { 
     this.mason(); 
    }, 
    data: function() { 
     return { 
      options: [ 
       { 
        option: 'projects', 
        phrase: 'for clients', 
        slogan: 'slogan...' 
       }, 
       { 
        option: 'sides', 
        phrase: 'for us', 
        slogan: 'we love what we make' 
       }, 
       { 
        option: 'moments', 
        phrase: 'with the crew' 
       } 
      ] 
     } 
    }, 
    methods: { 
     revert: function() { 
      this.$dispatch('return-home', true) 
     }, 
     mason: function() { 
      var $grid = $('.grid').masonry({ 
       itemSelector: '.grid-item', 
       columnWidth: 250 
      }); 
      $grid.masonry('layout'); 
     } 
    }, 
    events: { 
     'option-select': function (option) { 
     } 
    } 

} 
</script> 

Answer 1

在Vue2，不存在這樣的東西作爲一個ready生命週期鉤。相反，一旦實例按照您的想法處於「就緒」狀態，就會觸發生命週期掛鉤。

參考：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Answer 2

我想這樣做的VUE路是使用refs。只需將模板中的ref屬性分配給您的html元素，然後使用mounted callback中的vm.$ref實例屬性對其進行訪問。

一個示例代碼可能看起來像這樣：

<template> 
    <div class="grid" ref="grid"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
    </div> 
</template> 

<script> 
    import Masonry from "masonry"; // or maybe use global scoped variable here 
    export default { 
    mounted: function(){ 
     let $masonry = new Masonry(this.$refs.grid, { 
     // masonry options go in here 
     // see https://masonry.desandro.com/#initialize-with-vanilla-javascript 
     }); 
    } 
    } 
</script> 

Answer 3

這可能是垂直堆棧只是表明砌築不工作（這是很難說沒有codepen/plunkr）。雖然@ riyaz-ali有正確的想法。

Answer 4

當我看到它，就像VUE最MV *框架保持DOM元素（視圖）同步與JS（模型），在另一方面，像磚石框架只需要有效的DOM工作。 所以，棘手的部分是在DOM發生變化時告訴另一個人。

所以第一個變化是，當VUE完成渲染的所有DOM，在其他的答案中提到，我們正在mounted生命週期掛鉤通知，這裏是我們可以初始化磚石

mounted() { 
    let grid = document.querySelector('.grid'); 
    this.msnry = new Masonry(grid, { 
     columnWidth: 25 
    }); 
}, 

在任何其他變化我們認爲還需要更新磚石爲好，如果你改變項目大小使用layout()方法，如果您添加或刪除項目使用reloadItems()方法

methods: { 
     toggle(item) { 
      item.isGigante = !item.isGigante; 
      Vue.nextTick(() => { 
       // DOM updated 
       this.msnry.layout(); 
      }); 
     }, 
     add() { 
      this.items.push({ 
       isGigante: false, 
       size: '' + widthClasses[Math.floor(Math.random() * widthClasses.length)] + ' ' + heightClasses[Math.floor(Math.random() * heightClasses.length)] 
      }); 
      Vue.nextTick(() => { 
       // DOM updated 
       this.msnry.reloadItems(); 
       this.msnry.layout(); 
      }); 
     } 
    } 

請注意，這些方法都VUE小時後叫作爲已完成的DOM更新使用Vue.nextTick函數。 這是working fiddle。

Answer 5

必須調用磚石裏面mounted()事件，使其工作。 我在我的項目中使用了它（帶圖片加載）其工作完美

massonryApply (container, context, selector) { 
    container = $(`#${container}`) 
    const $grid = container.imagesLoaded(function() { 
    $grid.masonry({ 
     itemSelector: `.${selector}`, 
     percentPosition: true, 
     columnWidth: `.${selector}` 
    }) 

    $grid.masonry('reloadItems') 
    }) 
}