19.2.2 • Published 3 years ago

vuetify-image-input v19.2.2

Weekly downloads
1,376
License
MIT
Repository
github
Last release
3 years ago

VuetifyImageInput

Provides basic image editing tools.

demo

Try it out!

dependencies

setup

npm

npm i vuetify-image-input

import VuetifyImageInput from 'vuetify-image-input';

Use the treeshaking system.

import VuetifyImageInput from 'vuetify-image-input/a-la-carte';

browser

<link
  href="https://unpkg.com/vuetify@2/dist/vuetify.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vuetify@2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vuetify-image-input"></script>

The component is globally available as VuetifyImageInput. If Vue is detected, the component is registered automatically.

usage

Register the component globally.

import Vue from 'vue';
import VImageInput from 'vuetify-image-input';

Vue.component(VImageInput.name, VImageInput);

or

Register the component locally.

import VImageInput from 'vuetify-image-input';

export default {
  components: {
    VImageInput,
  },
  // ...
};

Use the component inside a template.

<v-image-input
  v-model="image"
  :image-quality="0.85"
  clearable
  image-format="jpeg"
  @file-info="onFileInfo"
/>

properties

nametypedefaultdescription
clearableBooleanfalse
clearIconString'$clear'
clearIconStyleObject
debounceNumber0
disabledBooleanfalse
errorIconString'$error'
errorIconStyleObject
flipHorizontallyIconString'mdi-flip-horizontal'
flipHorizontallyIconStyleObject
flipVerticallyIconString'mdi-flip-vertical'
flipVerticallyIconStyleObject
fullHeightBooleanfalse
fullWidthBooleanfalse
hideActionsBooleanfalse
imageBackgroundColorString
imageFormatString'png'Possible values are 'png', 'jpeg' and 'webp'.
imageHeightNumber256
imageMaxScalingNumber1
imageMinScalingString'cover'Possible values are 'cover' and 'contain'.
imageQuality
imageWidthNumber256
nameString
overlayBackgroundColorString'rgba(0,0,0,0.5)'
overlayBorderColorString'#fff'
overlayBorderWidthString'4px'
overlayPaddingString'50px'
readonlyBooleanfalse
rotateClockwiseIconString'mdi-rotate-right'
rotateClockwiseIconStyleObject
rotateCounterClockwiseIconString'mdi-rotate-left'
rotateCounterClockwiseIconStyleObject
successIconString'$success'
successIconStyleObject
uploadIconString'mdi-upload'
uploadIconStyleObject
valueString

events

name
file-info
input
19.2.2

3 years ago

19.2.1

3 years ago

19.2.0

3 years ago

19.1.0

5 years ago

19.0.0

5 years ago

18.16.0

5 years ago

18.15.1

5 years ago

18.15.0

5 years ago

18.14.0

5 years ago

18.13.0

5 years ago

18.12.2

5 years ago

18.12.1

6 years ago

18.12.0

6 years ago

18.11.0

6 years ago

18.10.25

6 years ago

18.10.23

6 years ago

18.9.20

6 years ago

18.9.17

6 years ago

18.9.14

6 years ago

18.9.9

6 years ago

18.9.7

6 years ago

18.8.28

6 years ago

18.6.22

6 years ago

18.6.2

6 years ago