19.2.2 • Published 3 years ago
vuetify-image-input v19.2.2
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 |
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