Vue3-picture-input

This is a simple input for image

WebSite

Migrate docs from 2 to 3 version

Docs for this version with examples

We need your ideas for new updates

If you any idea for update. Please, click here and fill in this form.

What's new?

1. Properties paddingY and paddingX were added

Installation

NPM: npm i vue3-picture-input

YARN: yarn add vue3-picture-input

Getting starting

Usage

Import the package into your component. And you will get your first program with this component.

// src/App.vue
<template>
  <VueImageInput
    size="size-72"
    mimes=".png,.jpg"
    title="Drop file here"/>
  <button>Show</button>
</template>

<script>
import { VueImageInput } from 'vue3-picture-input'
import "vue3-picture-input/style.css"

export default {
  name: 'App',

  components: {
    VueImageInput,
  },
}
</script>

<style scoped></style>

In this code you have imported your component and have added his styles.

If you want to get your putted image as file use v-model:file:

In this code implemented getting putted file functionality.

<template>
  <VueImageInput
    size="size-72"
    mimes=".png,.jpg"
    title="Drop file here"/>
  <button @click="showFile">Show</button>
</template>

<script>
import VueImageInput from './components/VueImageInput.vue'

export default {
  name: 'App',

  data() {
    return {
      file: []
    }
  },

  methods: {
    showFile() {
      console.log(this.file)
    },
  },

  components: {
    VueImageInput,
  },
}
</script>

<style scoped></style>

Properties

size

Size of this component

params

| param | value | | ----------- |:-------:| | size-4 | 1rem | | size-8 | 2rem | | size-12 | 3rem | | size-16 | 4rem | | size-20 | 5rem | | size-24 | 6rem | | size-28 | 7rem | | size-32 | 8rem | | size-36 | 9rem | | size-40 | 10rem | | size-44 | 11rem | | size-48 | 12rem | | size-52 | 13rem | | size-56 | 14rem | | size-60 | 15rem | | size-64 | 16rem | | size-68 | 17rem | | size-72 | 18rem | | size-76 | 19rem |

background

Background inside this component.

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  background="#7a7a7a"/>

textColor

Text color for title

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  textColor="#7a7a7a"
  title="Drop file here"/>

border

Border params: border-style, border-width,

params

| param | value | | ----------------- |:---------------------------------------------------------:| | border-none | border: none | | border | border-width: 1px | | border-2 | border-width: 2px | | border-3 | border-width: 3px | | border-4 | border-width: 4px | | border-5 | border-width: 5px | | border-6 | border-width: 6px | | border-7 | border-width: 7px | | border-8 | border-width: 8px | | border-9 | border-width: 9px | | border-10 | border-width: 10px | | border-solid | border-style: solid | | border-dashed | border-style: dashed | | border-dotted | border-style: dotted | | border-double | border-style: double |

borderColor

Border color

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  borderColor="#000"/>

bgRounded

Round background of this component.

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  bgRounded="50%"/>

imageRounded

Thank this prop you can round an image

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  bgRounded="50%"/>

closeBtn

Styles for closeBtn

params

When :hover

| param | value | | ----------------- |:---------------:| | hover-opacity-10 | opacity: 10% | | hover-opacity-20 | opacity: 20% | | hover-opacity-30 | opacity: 30% | | hover-opacity-40 | opacity: 40% | | hover-opacity-50 | opacity: 50% | | hover-opacity-60 | opacity: 60% | | hover-opacity-70 | opacity: 70% | | hover-opacity-80 | opacity: 80% | | hover-opacity-90 | opacity: 90% | | hover-opacity-100 | opacity: 100% |

closeBtnColor

Color for close button

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  closeBtnColor="blue"/>

mimes

Accepted types of files

recomended '.png,.jpg'

title

This is a text at your component

fontSize

Font size of your title

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  fontSize="16px"/>

padding

Padding of the container component

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  padding="16px"/>

paddingX

Padding left and right of the container component

paddingY

Padding top and bottom of the container component

paddingLeft

Padding left of the container component

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  paddingLeft="16px"/>

paddingRight

Padding right of the container component

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  paddingRight="16px"/>

paddingTop

Padding top of the container component

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  paddingTop="16px"/>

paddingBottom

Padding bottom of the container component

Example usage:

<VueImageInput
  size="size-72"
  mimes=".png,.jpg"
  paddingBottom="16px"/>

Customize styles

If you want customize styles or add your own styles.

You need to make next:

1. Delete styles of component.

// import "vue3-picture-input-test/style.css"

2. Add your own slyles.

import 'url of your styles'

Or you can write styles in your style tag in your component.

<style scoped>
  /* Example styles */

  .border-11 {
    border-width: 11px;
  }
</style>