# vue-upload-image-xw

一个基于 [vue](https://www.npmjs.com/package/vue) 的图片上传组件，支持本地图片选中上传、本地图片拖拽上传、剪贴板图片粘贴(ctrl+v)三种方式，同时，支持上传图片删除及图片浏览。

## Installing

依赖库：[vue](https://www.npmjs.com/package/vue) 2.5+, [vue-easy-lightbox](https://www.npmjs.com/package/vue-easy-lightbox) 0.10+

```shell
npm install vue-easy-lightbox --save
```

```javascript
import UploadImageXw from 'vue-upload-image-xw'
```
## 版本链
v1.0.1 基础功能搭建
v1.0.2 修复图片预览Icon加载失败
v1.0.3 支持用户传参

## Example

```html
<template>
  <div>
    <upload-image @data-change="changeUploadImageList"> </upload-image>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uploadImages: [] // 待上传的图片
    }
  },
  methods () {
    changeUploadImageList(data) {
      this.uploadImages = data
    }
  }
}
</script>
```
## Options

### Props
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>type</th>
      <th>default</th>
      <th>description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>maxImageNum</td>
      <td>Number</td>
      <td>10</td>
      <td>Maximum upload image</td>
    </tr>
    <tr>
      <td>maxImageSize</td>
      <td>Number</td>
      <td>1000 * 1000</td>
      <td>Maximum Image size</td>
    </tr>
    <tr>
      <td>paste</td>
      <td>Boolean</td>
      <td>true</td>
      <td>support paste image</td>
    </tr>
    <tr>
      <td>drop</td>
      <td>Boolean</td>
      <td>true</td>
      <td>support drop Image</td>
    </tr>
    <tr>
      <td>uploadText</td>
      <td>String</td>
      <td>在此区域点击、拖拽或粘贴上传图片</td>
      <td>/</td>
    </tr>
  </tbody>
</table>

### Events
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>arguments</th>
      <th>description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data-change</td>
      <td>(images)</td>
      <td>Upload images changed</td>
    </tr>
  </tbody>
</table>
