🏞 A graceful image type inputer / uploader
Switch branches/tags
Nothing to show
Clone or download
Latest commit 893e3e0 Jul 16, 2018
Permalink
Failed to load latest commit information.
dist v2.0.0 (#48) Jun 13, 2018
example v2.0.0 (#48) Jun 13, 2018
src v2.0.0 (#48) Jun 13, 2018
.eslintignore v2.0.0 (#48) Jun 13, 2018
.eslintrc.js v2.0.0 (#48) Jun 13, 2018
.gitignore v2.0.0 (#48) Jun 13, 2018
.npmignore doc: fix cn typo Jun 13, 2018
README-CN.MD * autopen 1st API Jul 16, 2018
README.md * autopen 1st API Jul 16, 2018
bili.config.js v2.0.0 (#48) Jun 13, 2018
package.json doc: fix cn typo Jun 13, 2018
poi.config.js v2.0.0 (#48) Jun 13, 2018
yarn.lock v2.0.0 (#48) Jun 13, 2018

README.md


vip


GitHub release poi Bili


点击查看中文文档 | Have a glance at Demo


Intro

  • <input type="file" /> like, only support single image
  • auto-upload support
  • drop-select / preview / use as <img /> as well
  • optional skins

Screenshots


Install and Usage

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"/>

API

Auto upload related
  1. auto-uoload: Boolean
    set to enable auto-upload

  2. action: String
    upload request URL

  3. upload-key: String
    default: file
    key name in form-data

  4. extra-data: Object
    extra data append in request's form-data

  5. headers: Object
    set additional headers of request

  6. with-cookie: Boolean
    whether cookies will send

  7. on-start: Function
    params: func ( file )
    hook function when upload start

  8. on-progress: Function
    params: func ( event, file )
    hook function when uploading, get progress by event.percent

  9. on-success: Function
    params: func ( res, file )
    hook function when upload success, res is response from server

  10. on-error: Function
    params: func ( err, file )
    hook function when upload failed


Input tag related
  1. accept: String
    default: image/*,video/*;
    suggest to set a specific value like image/jpg,image/gif; for wildcard will lead to a serious delay

  2. placeholder: String
    default: 点击或拖拽选择图片

  3. id: String
    default: random string in 4 length
    id of input tag

  4. readonly: Boolean

  5. capture: Boolean
    default: false
    whether use camera directly in mobile

  6. max-size: Number
    default: 5120
    max-size of image (KB)

  7. name: Boolean
    name of input tag

  8. any input's attribute
    any input's original attributes set on component will be inherited by inner input tag


UI related
  1. img-src: String
    image resource let component behavior like <img />

  2. theme: String
    default: material two themes optional (light / material)

  3. size: String small / normal / large

  4. icon: String
    clip / img / img2

  5. ali-icon: String
    if you use iconfont.cn, set unicode of any icon to custom

  6. no-mask: Boolean
    remove mask when hover

  7. no-hover-effect: Boolean
    remove all hover effect (include text) when hover

  8. bottom-text: String
    default: 点击或拖拽图片以修改
    text in the bottom when hover

  9. readonly-tip-text: String
    default: 不可更改
    visible only the state is readonly, cover bottom-text


Events
  1. on-change: Function
    params: func ( file, fileName )
    hook function when file selected

Methods
  1. reset
    reset componet but will not clear img-src