Giter Club home page Giter Club logo

vue-img-inputer's Introduction


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

vue-img-inputer's People

Contributors

sinchang avatar wayne-mai avatar waynecz avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.