0.2.0 • Published 4 years ago
shinemo-imagelist v0.2.0
图片列表展示/ImageList
使用
参数 | 类型 | 备注 |
---|---|---|
toEach | Array | 必填数据列表 |
toEach0.src | String | 必填图片url |
toEach0.name | String | 图片名称 |
onClick | Function | 点击图片回调 |
onClose | Function | 点击关闭回调,不传没有关闭按钮 |
bgSize | String | 图片的展示效果,同background-size , cover ,contain ,100% ... |
width | String | 图片容器的宽度,带px ,例如72px |
height | String | 图片容器的高度,带px ,例如72px |
cls | String | 列表的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);
});
0.2.0
4 years ago