export default {
    data() {
        // 隨機(jī)生成20個(gè)測(cè)試數(shù)據(jù)
        const num = 20;
        var list = new Array(num).fill(0).map((v, i) => {
            return this.createItem(i);
        })
        return {
            list,
        }
    },
    // 直接用render函數(shù)來(lái)寫(xiě)，因?yàn)槲矣X(jué)得這樣寫(xiě)props更直觀一點(diǎn)
    render(h){
        return h('tag-autoflow', {
            props:{
                // 設(shè)置列數(shù)量
                column_size:3,
                // 數(shù)據(jù)源
                data: this.list,
                // 渲染item的方法，參數(shù)目前提供三個(gè)
                // h 瀑布流組件的createElement方法，非父組件的
                // item 要渲染的元素對(duì)象
                // next 必須主動(dòng)調(diào)用next，插件才會(huì)自動(dòng)去渲染下一個(gè)元素，詳細(xì)說(shuō)明見(jiàn)下文
                renderItem(h, item, next){
                    // 簡(jiǎn)單的渲染一個(gè)img跟一個(gè)p標(biāo)簽
                    // 因?yàn)閕mg標(biāo)簽的圖片加載需要時(shí)間，而圖片影響了計(jì)算所在列的高度
                    // 所以需要在img觸發(fā)了load事件后，再去調(diào)用next渲染下一個(gè)item。
                    return h('div', [
                        h('img', {
                            attrs: {
                                src: item.img
                            },
                            on: {
                                load: e => {
                                    next();
                                }
                            }
                        }),
                        h('p', item.title)
                    ])
                },
            },
        });
    },
    methods:{
        createItem(i) {
            var title = i + ',' + new Array(_.random(10, 150)).fill('哈').join('');
            var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;
            return {
                img,
                title,
            }
        },
    }
}

renderItem(h, item, next){
    this.$nextTick(function(){
        next();
    });
    return h('p', item.title);
},