vue3-picture-input v3.2.0

Vue3-picture-input

This is a simple input for image

We need your ideas for new updates

If you any idea for update. Please, click here and create a new issue.

Support project

If you like this project, please put a star on GitHub

What's new?

1. Rewrited core of component to Composition API
2. Added default value for title property as "Drop here"
3. Added default value for mimes property as ".jpg,.png"

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.

Options API

// src/App.vue
<template>
  <VueImageInput
    size="size-72"
    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>

Composition API

<template>
  <VueImageInput
    size="size-72"
    title="Drop file here"/>
  <button>Show</button>
</template>

<script setup>
import { VueImageInput } from 'vue3-picture-input'
import "vue3-picture-input/style.css"
</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.

Options API

<template>
  <VueImageInput
    size="size-72"
    v-model:file="file"
    title="Drop file here"/>
  <button @click="showFile">Show</button>
</template>

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

export default {
  name: 'App',

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

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

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

<style scoped></style>

Composition API

<template>
  <VueImageInput
    size="size-72"
    v-model:file="file"
    title="Drop file here"/>
  <button @click="showFile">Show</button>
</template>

<script setup>
import { ref } from 'vue'

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

const file = ref([])

const showFile = () => {
  console.log(file.value)
}  
</script>

<style scoped></style>

Properties

size

Size of this component

params

background

Background inside this component.

Example usage:

<VueImageInput
  size="size-72
  background="#7a7a7a"/>

textColor

Text color for title

Example usage:

<VueImageInput
  size="size-72
  textColor="#7a7a7a"
  title="Drop file here"/>

border

Border params: border-style, border-width,

params

borderColor

Border color

Example usage:

<VueImageInput
  size="size-72
  borderColor="#000"/>

bgRounded

Round background of this component.

Example usage:

<VueImageInput
  size="size-72
  bgRounded="50%"/>

imageRounded

Thank this prop you can round an image

Example usage:

<VueImageInput
  size="size-72
  bgRounded="50%"/>

closeBtn

Styles for closeBtn

params

When :hover

closeBtnColor

Color for close button

<VueImageInput
  size="size-72
  closeBtnColor="blue"/>

mimes

Accepted types of files // default ".jpg,.png"

Example usage:

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

title

This is a text at your component // default "Drop here"

fontSize

Font size of your title

Example usage:

<VueImageInput
  size="size-72
  fontSize="16px"/>

padding

Padding of the container component

Example usage:

<VueImageInput
  size="size-72
  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
  paddingLeft="16px"/>

paddingRight

Padding right of the container component

Example usage:

<VueImageInput
  size="size-72
  paddingRight="16px"/>

paddingTop

Padding top of the container component

Example usage:

<VueImageInput
  size="size-72
  paddingTop="16px"/>

paddingBottom

Padding bottom of the container component

Example usage:

<VueImageInput
  size="size-72
  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>