VuetifyImageInput

Provides basic image editing tools.

demo

dependencies

VueClaw

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

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

Vue.component(VImageInput.name, VImageInput);

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`

SeregPie/VuetifyImageInput

SeregPie

Reviews

Repository Details