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