图片预览 KLImagePreview

基本形式

图片预览 KLImagePreview - 图1

<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
            }
        });
    }
});

配置要嵌入的父级元素

图片预览 KLImagePreview - 图2

<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

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.image-list]	`array`		=> 必选，图片文件列表, 其中每个文件项包含下面的字段: name: 图片文件名称 src: 图片文件的路径
[options.data.cur-index]	`number`	`0`	=> 必选，当前图片文件的索引, 默认第一项为当前项
[options.data.el]	`string`		=> 设置对话框要插入的父级元素，默认为document.body