diff options
Diffstat (limited to 'src/site/components/grid/waterfall/Waterfall.vue')
| -rw-r--r-- | src/site/components/grid/waterfall/Waterfall.vue | 47 |
1 files changed, 38 insertions, 9 deletions
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue index cccc3ac..a83a275 100644 --- a/src/site/components/grid/waterfall/Waterfall.vue +++ b/src/site/components/grid/waterfall/Waterfall.vue @@ -1,14 +1,14 @@ -<style> - .waterfall { - position: relative; - } -</style> <template> <div class="waterfall"> - <slot /> + <WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth"> + <slot :item="item" /> + </WaterfallItem> </div> </template> + <script> +import WaterfallItem from './WaterfallItem.vue'; + const quickSort = (arr, type) => { const left = []; const right = []; @@ -49,6 +49,9 @@ const sum = (arr) => arr.reduce((acc, val) => acc + val, 0); export default { name: 'Waterfall', + components: { + WaterfallItem, + }, props: { gutterWidth: { type: Number, @@ -82,6 +85,14 @@ export default { type: Array, default: null, }, + itemWidth: { + type: Number, + default: 150, + }, + items: { + type: Array, + default: () => [], + }, }, data() { return { @@ -89,15 +100,21 @@ export default { colNum: 0, lastWidth: 0, percentWidthArr: [], + readyChildCount: 0, }; }, + watch: { + items() { + this.$nextTick(() => this.render('watch')); + }, + }, created() { this.$on('itemRender', () => { if (this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(() => { - this.render(); + this.render('created'); }, 0); }); }, @@ -105,6 +122,10 @@ export default { this.resizeHandle(); this.$watch('resizable', this.resizeHandle); }, + beforeDestroy() { + this.$off('itemRender'); + _.off(window, 'resize', this.render); + }, methods: { calulate(arr) { const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth; @@ -135,10 +156,12 @@ export default { _.off(window, 'resize', this.render, false); } }, - render() { + render(context) { + console.log(context); + if (!this.items) return; // 重新排序 let childArr = []; - childArr = this.$children.map((child) => child.getMeta()); + childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta()); childArr = quickSort(childArr, 'order'); // 计算列数 this.calulate(childArr[0]); @@ -180,3 +203,9 @@ export default { }, }; </script> + +<style> + .waterfall { + position: relative; + } +</style> |