图片预览 KLImagePreview

基本形式

<kl-button title="打开图片预览" on-click={this.onPreviewClick()} />

var component = new NEKUI.Component({
    template: template,
    onPreviewClick: function() {
        const imageList = [{
            name: 'Kaola.jpeg',
            src: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
            name: 'Music.jpg',
            src: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }];
        new NEKUI.KLImagePreview({
            data: {
                imageList: imageList,
                curIndex: 0
            }
        });
    }
});

配置要嵌入的父级元素

<kl-button title="打开图片预览" on-click={this.onPreviewClick()} />

var component = new NEKUI.Component({
    template: template,
    onPreviewClick: function() {
        const imageList = [{
            name: 'Kaola.jpeg',
            src: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg'
        }, {
            name: 'Music.jpg',
            src: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg'
        }];
        new NEKUI.KLImagePreview({
            data: {
                imageList: imageList,
                curIndex: 0,
                el: '#main'
            }
        });
    }
});

API

KLImagePreview

KLImagePreview