diff options
Diffstat (limited to 'src/site/components/grid/waterfall/WaterfallItem.vue')
| -rw-r--r-- | src/site/components/grid/waterfall/WaterfallItem.vue | 54 |
1 files changed, 2 insertions, 52 deletions
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue index a02ea1f..2a18606 100644 --- a/src/site/components/grid/waterfall/WaterfallItem.vue +++ b/src/site/components/grid/waterfall/WaterfallItem.vue @@ -1,60 +1,10 @@ -<style> - .waterfall-item { - position: absolute; - } -</style> <template> <div class="waterfall-item"> <slot /> </div> </template> <script> -import imagesLoaded from 'imagesloaded'; export default { - name: 'WaterfallItem', - props: { - order: { - type: Number, - default: 0 - }, - width: { - type: Number, - default: 150 - } - }, - data() { - return { - itemWidth: 0, - height: 0 - }; - }, - created() { - this.$watch(() => this.height, this.emit); - }, - mounted() { - this.$el.style.display = 'none'; - this.$el.style.width = `${this.width}px`; - this.emit(); - imagesLoaded(this.$el, () => { - this.$el.style.left = '-9999px'; - this.$el.style.top = '-9999px'; - this.$el.style.display = 'block'; - this.height = this.$el.offsetHeight; - this.itemWidth = this.$el.offsetWidth; - }); - }, - methods: { - emit() { - this.$parent.$emit('itemRender'); - }, - getMeta() { - return { - el: this.$el, - height: this.height, - width: this.itemWidth, - order: this.order - }; - } - } -} + name: 'WaterfallItem' +}; </script> |