# ImageList

图片列表组件

- 通过images配置图片列表数据，数组格式，其中图片地址对应`image`字段，名称对应`title`字段，描述对应`desp`字段。
- 通过column设置图片列表的列数，1-8列。
- 通过titleField设置名称的格式，以`#`代表名称；通过despField设置描述的格式，以`#`代表描述。
- 通过otherParams设置额外的字段和格式。
- 通过clickCallback设置点击单个图片块的回调函数，返回当前图片的所有数据。
- 可以自定义内容children，当有内容时除了column其他属性不起作用。

主要属性和接口：

- images:图片列表数据，默认[]。

      json:
      {
      "data": [
         {
             "image": "http://img5.duitang.com/uploads/item/201602/11/20160211214958_RhdCY.jpeg",
             "title": "图1",
             "desp": "关于图是一个...",
             "score": 1
         },
         ...
      ]
      }
      ...
      <ImageList images={this.state.images} />

- column:列表的列数，默认1。
  如: `<ImageList column={2} images={this.state.images} />`
- titleField:名称的格式，以`#`代表名称，默认"#"despField:描述的格式，以`#`代表描述，默认"#"。
  如: `<ImageList images={this.state.images} titleField={"姓名: #"} despField={"描述: #"} />`
- otherParams:额外的字段和格式，默认{}。
  如: `<ImageList images={this.state.images} otherParams={{"score":"分数: #"}} />`
- clickCallback:点击单个图片块的回调函数。
  如: `<ImageList images={this.state.images} clickCallback={(data)=>{console.log(data);}} />`
- 自定义内容:children，当有内容时除了column其他属性不起作用。

      <ImageList column={4}>
      {
         this.state.images.map((data,index)=>{
             return (
                 <dl key={index}>
                     <dd>
                         <p>{data.title}</p>
                         <p>{data.desp}</p>
                     </dd>
                     <dt>
                         <img src={data.image} alt={data.title} />
                     </dt>
                 </dl>
             )
         })
      }
      </ImageList>

### 方法

- clickCallback

### 属性

- classPrefix
- column
- despField
- images
- otherParams
- titleField

### 事件

Extends Component
Defined in: `src/ImageList.js:6`
Module: 操作类组件

Available since 1.7.0

## Constructor

### ImageList

`ImageList ()`

Defined in `src/ImageList.js:6`

Available since 1.7.0

#### Example:

    import React, { Component } from "react";
    import {ImageList} from "phoenix-ui";
    import Code from "./code/code";
    import {ajax} from "./utils/tool.js";

    export default class imagelist extends Component{
        constructor(props,context){
            super(props,context);

            this.state = {
                images: []
            }

            this.getData("./data/post1.json",0);
        }

        getData(fileName){ // 获取数据方法，ajax方法在下面定义了
            ajax(fileName).then((json)=>{
                let data = json.data;

                this.setState({
                    images: data
                });

            }, (error)=>{// 加载失败
                console.error("出错了", error)
            });
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">ImageList</h2>
                    <h3 className="comp-type">images(默认[]) 图片数据<br/>默认地址的字段是image，名称的字段是title，描述的字段是desp</h3>
                    <ImageList images={this.state.images} column={4} />
                    <Code target="imagelist-images" />

                    <h3 className="comp-type">column(默认1) 图片列数</h3>
                    <ImageList column={2}  images={this.state.images} />
                    <Code target="imagelist-column" />

                    <h3 className="comp-type">titleField(默认#) 姓名格式更改，#代表数值；<br/>despField(默认#) 描述格式更改，#代表数值</h3>
                    <ImageList images={this.state.images} column={4} titleField={"姓名: #"} despField={"描述: #"} />
                    <h3 className="comp-tip"> 如果name或desp中有不要的字段，传空字符"" </h3>
                    <ImageList images={this.state.images} column={4} titleField={"姓名: #"} despField={""} />
                    <Code target="imagelist-format" />

                    <h3 className="comp-type">otherParams(默认{}) 其他增加项</h3>
                    <ImageList images={this.state.images} column={4} otherParams={{"score":"分数: #"}} />
                    <Code target="imagelist-otherparams" />

                    <h3 className="comp-type">clickCallback(默认null) 点击单个图片块的回调函数</h3>
                    <ImageList images={this.state.images} column={4} clickCallback={(data)=>{console.log(data);}} />
                    <Code target="imagelist-clickcallback" />

                    <h3 className="comp-type">children(默认无) 内容完全自定义</h3>
                    <ImageList column={4}>
                        {
                            this.state.images.map((data,index)=>{
                                return (
                                    <dl key={index}>
                                        <dd>
                                            <p className="ph-image-title">{data.title}</p>
                                            <p className="ph-image-desp">{data.desp}</p>
                                        </dd>
                                        <dt>
                                            <img src={data.image} alt={data.title} />
                                        </dt>
                                    </dl>
                                )
                            })
                        }
                    </ImageList>
                    <Code target="imagelist-custom" />
                </div>
            );
        }
    }

## 方法

### clickCallback

`clickCallback ()`

Defined in `src/ImageList.js:115`

点击单个图片块的回调函数,返回当前图片的所有信息

## 属性

### `classPrefix`

String

Defined in `src/ImageList.js:73`

样式前缀

Default:

`'image-list'`

### `column`

Number

Defined in `src/ImageList.js:87`

图片列数

Default:

`1`

### `despField`

String

Defined in `src/ImageList.js:101`

描述格式

Default:

`"#"`

### `images`

Array

Defined in `src/ImageList.js:80`

图片列表数据

Default:

`[]`

### `otherParams`

Object

Defined in `src/ImageList.js:108`

其他参数，额外增加的可自定义的字段

Default:

`{}`

### `titleField`

String

Defined in `src/ImageList.js:94`

名称格式

Default:

`"#"`