## ImagePicker 图片选取

### 使用指南
``` javascript
import { ImagePicker } from 'vortex-mobile';

Vue.use(ImagePicker);
```

### 代码演示

#### 基础用法
简单的图片选择组件

```html
<vm-image-picker
    :files="files"
    :onChange="onChange"
    :selectable="files.length < 7"
    :onImageClick="onImageClick"
/>
```

```javascript
const images = [
  {
    id: 1,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
  }, {
    id: 2,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
  }, {
    id: 3,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
  },
];

export default {
  data() {
    return {
      files: images,
    };
  },
  methods: {
    onChange(files, type, index) {
      this.files = files;
      if (type === 'add') {
        this.$toast(type);
      } else {
        this.$toast(type + ' index:' + index);
      }
    },

    onImageClick(files, index) {
      this.$toast(`点击了第${index}张图片`);
    },
  }
}
```

#### 自定义选择图片的方法
禁用选择图片，添加自定义图片。

```html
<vm-image-picker
    :files="files"
    :onChange="onChange"
    :selectable="files.length < 5"
    :onImageClick="onImageClick"
    :onAddImageClick="onAddImageClick"
/>
```

```javascript
const images = [
  {
    id: 1,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
  }, {
    id: 2,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
  }, {
    id: 3,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
  },
];

export default {
  data() {
    return {
      files: images,
    };
  },
  methods: {
    onChange(files, type, index) {
      this.files = files;
      if (type === 'add') {
        this.$toast(type);
      } else {
        this.$toast(type + ' index:' + index);
      }
    },

    onAddImageClick(e) {
      e.preventDefault();
      this.files = this.files.concat({
        url: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
      },);
    },
  }
};
```
#### 自定义文件类型
设置可选择的文件类型。

```html
<vm-image-picker
    :files="files"
    :onChange="onChange"
    :selectable="files.length < 5"
    accept="image/gif,image/jpeg,image/jpg,image/png"
/>
```

```javascript
const images = [
  {
    id: 1,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
  }, {
    id: 2,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
  }, {
    id: 3,
    url: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
  },
];

export default {
  data() {
    return {
      files: images,
    };
  },
  methods: {
    onChange(files, type, index) {
      this.files = files;
      if (type === 'add') {
        this.$toast(type);
      } else {
        this.$toast(type + ' index:' + index);
      }
    },
  }
};
```

#### 自定义数量
设置单行展示个数。

```html
<vm-image-picker
    :files="files"
    :onChange="onChange"
    :selectable="files.length < 5"
    :length="3"
/>
```

```js
export default {
  data() {
    return {
      files: images,
    };
  },
  methods: {
    onChange(files, type, index) {
      this.files = files;
      if (type === 'add') {
        this.$toast(type);
      } else {
        this.$toast(type + ' index:' + index);
      }
    },
  }
};
```


### API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| files | 图片文件数组,元素为对象,包含属性 url（必选, 可能还有id, orientation, 以及业务需要的其它属性 | `Array` | [] | - |
| onChange | files 值发生变化触发的回调函数, type 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引 | (files: Object, type: string, index: number): void | - | - |
| onImageClick | 点击图片触发的回调 | (files: Object, index: number): void | - | - |
| onAddImageClick | 自定义选择图片的方法 | (): void | - | - |
| onFail | 选择失败 | (msg: Error): void | - | - |
| selectable | 是否显示添加按钮 | `Boolean` | `true` | - |
| multiple | 是否支持多选	 | `Boolean` | `false` | - |
| accept | 图片类型 | `String` | `image/*` | - |
| length | 单行的图片数量 | `Number` | `4` | - |
| capture | 图片捕获设置, 具体请参考MDN中关于capture的说明 | `Boolean | String` | `false` | - |

### 事件

| 事件名 | 说明 | 参数 |
|------|------|------|
| change | 文件变化时触发 | files, 新文件列表; type, 操作类型, 'add' 或 'remove'; index, 移除图片的索引 |
| image-click | 点击图片时触发 | index, 点击图片的索引; files, 文件列表|
| fail | 图片选择失败触发 | msg, 错误对象 |