https://github.com/waynecz/vue-img-inputer
🏞 A graceful image type inputer / uploader
https://github.com/waynecz/vue-img-inputer
component input ui vue vue2
Last synced: 6 months ago
JSON representation
🏞 A graceful image type inputer / uploader
- Host: GitHub
- URL: https://github.com/waynecz/vue-img-inputer
- Owner: waynecz
- Created: 2017-02-18T06:33:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-09-06T05:03:40.000Z (about 6 years ago)
- Last Synced: 2025-04-12T17:48:31.845Z (7 months ago)
- Topics: component, input, ui, vue, vue2
- Language: Vue
- Homepage: http://waynecz.github.io/VueImgInputer/index.html
- Size: 4.9 MB
- Stars: 565
- Watchers: 22
- Forks: 125
- Open Issues: 8
-
Metadata Files:
- Readme: README-CN.MD
Awesome Lists containing this project
- awesome-github-vue - vue-img-inputer - 基于Vue2的图片输入框 (UI组件)
- awesome - vue-img-inputer - 基于Vue2的图片输入框 (UI组件)
- awesome-vue - vue-img-inputer - img-inputer?style=social) - 基于Vue2的图片输入框 (UI组件)
- awesome-github-vue - vue-img-inputer - 基于Vue2的图片输入框 (UI组件)
README
教程: 从0开始做一个文件选择(上传)组件
|
查看 Demo
## 简介
- 就像 ``，不支持多图片选择
- 支持自动上传功能
- 拖拽选择、预览、也可以当 `![]()
` 使用
- 两套主题，其他高度定制
## 截图
## 使用
```bash
npm install vue-img-inputer
```
```javascript
import ImgInputer from 'vue-img-inputer'
import 'vue-img-inputer/dist/index.css'
Vue.component('ImgInputer', ImgInputer)
```
```html
```
## 接口
自动上传 相关
1. **`auto-upload`**: Boolean
设置开启自动上传功能
2. **`action`**: String
上传的 URL
3. **`upload-key`**: String
**default**: `file`
图片在 form-data 中的 key 名
4. **`extra-data`**: Object
上传的额外数据
5. **`headers`**: Object
上传的额外 headers
6. **`with-cookie`**: Boolean
是否携带 cookie
7. **`on-start`**: Function
**params**: func ( file )
上传开始的钩子函数
8. **`on-progress`**: Function
**params**: func ( event, file )
上传中的钩子函数，可以通过 `event.percent` 获得当前上传进度
9. **`on-success`**: Function
**params**: func ( res, file )
上传成功的钩子函数，`res` 是服务端返回的数据
10. **`on-error`**: Function
**params**: func ( err, file )
上传失败的钩子函数
Input 标签 相关
1. **`accept`**: String
**default**: `image/*,video/*;`
建议设置成像 `image/jpg,image/gif;` 之类的具体指，不然可能造成文件夹呼出特别慢
2. **`placeholder`**: String
**default**: `点击或拖拽选择图片`
3. **`id`**: String
**default**: random string in 4 length
4. **`readonly`**: Boolean
5. **`capture`**: Boolean
**default**: `false`
在移动端是否直接呼出相机
6. **`max-size`**: Number
**default**: 5120
图片大小限制 (KB)
7. **`name`**: Boolean
原生 name 属性
8. **`任意 input 的原生属性`**: any
任意 input 的原生属性都将继承给内部的 input 标签
视觉 相关
1. **`img-src`**: String
图片回填地址，设置后组件将会像 `![]()
` 标签一样
2. **`theme`**: String
**default**: `material`
两套主题 (light / material)
3. **`size`**: String
small / normal / large
4. **`icon`**: String
clip / img / img2
5. **`ali-icon`**: String
如果你用了 [iconfont.cn](http://iconfont.cn/), 可以设置你项目里的 icon unicode 值
6. **`no-mask`**: Boolean
去除 hover 蒙版
7. **`no-hover-effect`**: Boolean
去除所有 hover 效果
8. **`bottom-text`**: String
**default**: `点击或拖拽图片以修改`
hover 后底部的文字
9. **`readonly-tip-text`**: String
**default**: `不可更改`
只读情况下底部的文字
事件
1. **`on-change`**: Function
**params**: func ( file, fileName )
文件更改时的钩子函数
2. **`onExceed`**: Function
**params**: func ( file )
文件超出最大设置时的钩子函数
组件方法
1. **`reset`**
重置组建的数据，但不重置 `img-src`