vuetify-image-input
VuetifyImageInput
Provides basic image editing tools.
demo
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
| name | type | default | description |
|---|---|---|---|
clearable |
Boolean |
false |
|
clearIcon |
String |
'$clear' |
|
clearIconStyle |
Object |
||
debounce |
Number |
0 |
|
disabled |
Boolean |
false |
|
errorIcon |
String |
'$error' |
|
errorIconStyle |
Object |
||
flipHorizontallyIcon |
String |
'mdi-flip-horizontal' |
|
flipHorizontallyIconStyle |
Object |
||
flipVerticallyIcon |
String |
'mdi-flip-vertical' |
|
flipVerticallyIconStyle |
Object |
||
fullHeight |
Boolean |
false |
|
fullWidth |
Boolean |
false |
|
hideActions |
Boolean |
false |
|
imageBackgroundColor |
String |
||
imageFormat |
String |
'png' |
Possible values are 'png', 'jpeg' and 'webp'. |
imageHeight |
Number |
256 |
|
imageMaxScaling |
Number |
1 |
|
imageMinScaling |
String |
'cover' |
Possible values are 'cover' and 'contain'. |
imageQuality |
|||
imageWidth |
Number |
256 |
|
name |
String |
||
overlayBackgroundColor |
String |
'rgba(0,0,0,0.5)' |
|
overlayBorderColor |
String |
'#fff' |
|
overlayBorderWidth |
String |
'4px' |
|
overlayPadding |
String |
'50px' |
|
readonly |
Boolean |
false |
|
rotateClockwiseIcon |
String |
'mdi-rotate-right' |
|
rotateClockwiseIconStyle |
Object |
||
rotateCounterClockwiseIcon |
String |
'mdi-rotate-left' |
|
rotateCounterClockwiseIconStyle |
Object |
||
successIcon |
String |
'$success' |
|
successIconStyle |
Object |
||
uploadIcon |
String |
'mdi-upload' |
|
uploadIconStyle |
Object |
||
value |
String |
events
| name |
|---|
file-info |
input |
Related Packages
@jzolago/vuetify-number-input
vuetify-number-input is a simple wrapper for the Vuetify Text Field UI component...
2,758
@kingscode/vuetify-phone-input
A Vuetify form control usable for phone numbers. Supports country code, auto for...
11,175
vue-picture-input
Mobile-friendly picture file input component with image preview and drag and dro...
131,226
883
Version History
| Version | Released | License |
|---|---|---|
| 19.2.2 | MIT | |
| 19.2.1 | MIT | |
| 19.2.0 | MIT | |
| 19.1.0 | MIT | |
| 19.0.0 | MIT | |
| 18.16.0 | MIT | |
| 18.15.1 | MIT | |
| 18.15.0 | MIT | |
| 18.14.0 | MIT | |
| 18.13.0 | MIT | |
| 18.12.2 | MIT | |
| 18.12.1 | MIT | |
| 18.12.0 | MIT | |
| 18.11.0 | MIT | |
| 18.10.25 | MIT | |
| 18.10.23 | MIT | |
| 18.9.20 | MIT | |
| 18.9.17 | MIT | |
| 18.9.14 | MIT | |
| 18.9.9 | MIT | |
| 18.9.7 | MIT | |
| 18.8.28 | MIT | |
| 18.6.22 | MIT | |
| 18.6.2 | MIT |