点击查看中文文档 | Have a glance at Demo
<input type="file" />
like, only support single image- auto-upload support
- drop-select / preview / use as
<img />
as well - optional skins
npm install vue-img-inputer
import ImgInputer from 'vue-img-inputer'
import 'vue-img-inputer/dist/index.css'
Vue.component('ImgInputer', ImgInputer)
<img-inputer v-model="file" theme="light" size="large"/>
Auto upload
related
-
auto-uoload
: Boolean
set to enable auto-upload -
action
: String
upload request URL -
upload-key
: String
default:file
key name in form-data -
extra-data
: Object
extra data append in request's form-data -
headers
: Object
set additional headers of request -
with-cookie
: Boolean
whether cookies will send -
on-start
: Function
params: func ( file )
hook function when upload start -
on-progress
: Function
params: func ( event, file )
hook function when uploading, get progress byevent.percent
-
on-success
: Function
params: func ( res, file )
hook function when upload success,res
is response from server -
on-error
: Function
params: func ( err, file )
hook function when upload failed
Input tag
related
-
accept
: String
default:image/*,video/*;
suggest to set a specific value likeimage/jpg,image/gif;
for wildcard will lead to a serious delay -
placeholder
: String
default:点击或拖拽选择图片
-
id
: String
default: random string in 4 length
id of input tag -
readonly
: Boolean -
capture
: Boolean
default:false
whether use camera directly in mobile -
max-size
: Number
default: 5120
max-size of image (KB) -
name
: Boolean
name of input tag -
any input's attribute
any input's original attributes set on component will be inherited by inner input tag
UI
related
-
img-src
: String
image resource let component behavior like<img />
-
theme
: String
default:material
two themes optional (light / material) -
size
: String small / normal / large -
icon
: String
clip / img / img2 -
ali-icon
: String
if you use iconfont.cn, set unicode of any icon to custom -
no-mask
: Boolean
remove mask when hover -
no-hover-effect
: Boolean
remove all hover effect (include text) when hover -
bottom-text
: String
default:点击或拖拽图片以修改
text in the bottom when hover -
readonly-tip-text
: String
default:不可更改
visible only the state isreadonly
, cover bottom-text
Events
on-change
: Function
params: func ( file, fileName )
hook function when file selected
Methods
reset
reset componet but will not clearimg-src