0.2.0 • Published 4 years ago

shinemo-imagelist v0.2.0

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
4 years ago

图片列表展示/ImageList

使用

参数类型备注
toEachArray必填数据列表
toEach0.srcString必填图片url
toEach0.nameString图片名称
onClickFunction点击图片回调
onCloseFunction点击关闭回调,不传没有关闭按钮
bgSizeString图片的展示效果,同background-size, cover,contain,100%...
widthString图片容器的宽度,带px,例如72px
heightString图片容器的高度,带px,例如72px
clsString列表的class,可用于定制列表的样式
import React from 'react';
import ReactDOM from 'react-dom';
import ImageList from '@xm/ImageList';

const DATA = [
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=c2bb15b169752f93126167d26e570a31',
		name: 'xxx'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=b2e71fd36d1e32776a744416e453c988',
		name: 'yyy'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=c2bb15b169752f93126167d26e570a31',
		name: 'xxx'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=b2e71fd36d1e32776a744416e453c988',
		name: 'yyy'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=c2bb15b169752f93126167d26e570a31',
		name: 'xxx'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=b2e71fd36d1e32776a744416e453c988',
		name: 'yyy'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=c2bb15b169752f93126167d26e570a31',
		name: 'xxx'
	},
	{
		src: 'https://filesystem.api.jituancaiyun.com/sfs/file?digest=b2e71fd36d1e32776a744416e453c988',
		name: 'yyy'
	}
];

window.addEventListener('DOMContentLoaded', () => {
	ReactDOM.render((<ImageList toEach={DATA}  onClick={p => console.log(p)} onClose={p => console.log(p)} width="72px" height="72px" bgSize="contain" />), document.body);
});