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. Added imageSrc property

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

1// src/App.vue
2<template>
3  <VueImageInput
4    size="size-72"
5    title="Drop file here"/>
6  <button>Show</button>
7</template>
8
9<script>
10import { VueImageInput } from 'vue3-picture-input'
11import "vue3-picture-input/style.css"
12
13export default {
14  name: 'App',
15
16  components: {
17    VueImageInput,
18  },
19}
20</script>
21
22<style scoped></style>

Composition API

1<template>
2  <VueImageInput
3    size="size-72"
4    title="Drop file here"/>
5  <button>Show</button>
6</template>
7
8<script setup>
9import { VueImageInput } from 'vue3-picture-input'
10import "vue3-picture-input/style.css"
11</script>
12
13<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

1<template>
2  <VueImageInput
3    size="size-72"
4    v-model:file="file"
5    title="Drop file here"/>
6  <button @click="showFile">Show</button>
7</template>
8
9<script>
10import { VueImageInput } from 'vue3-picture-input'
11import "vue3-picture-input/style.css"
12
13export default {
14  name: 'App',
15
16  data() {
17    return {
18      file: []
19    }
20  },
21
22  methods: {
23    showFile() {
24      console.log(this.file)
25    },
26  },
27
28  components: {
29    VueImageInput,
30  },
31}
32</script>
33
34<style scoped></style>

Composition API

1<template>
2  <VueImageInput
3    size="size-72"
4    v-model:file="file"
5    title="Drop file here"/>
6  <button @click="showFile">Show</button>
7</template>
8
9<script setup>
10import { ref } from 'vue'
11
12import { VueImageInput } from 'vue3-picture-input'
13import "vue3-picture-input/style.css"
14
15const file = ref([])
16
17const showFile = () => {
18  console.log(file.value)
19}  
20</script>
21
22<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:

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

textColor

Text color for title

Example usage:

1<VueImageInput
2  size="size-72
3  textColor="#7a7a7a"
4  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:

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

bgRounded

Round background of this component.

Example usage:

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

imageRounded

Thank this prop you can round an image

Example usage:

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

1<VueImageInput
2  size="size-72
3  closeBtnColor="blue"/>

mimes

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

Example usage:

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

required

Is required field. Params true or false
// default false

Example usage:

1<VueImageInput
2  size="size-72
3  :required="true"/>

imageSrc

Accept default imageSrc on preview. Params string
// default false

Example usage:

1<VueImageInput
2  size="size-72
3  imageSrc="path/some.png"/>

title

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

fontSize

Font size of your title

Example usage:

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

padding

Padding of the container component

Example usage:

1<VueImageInput
2  size="size-72
3  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:

1<VueImageInput
2  size="size-72
3  paddingLeft="16px"/>

paddingRight

Padding right of the container component

Example usage:

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

paddingTop

Padding top of the container component

Example usage:

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

paddingBottom

Padding bottom of the container component

Example usage:

1<VueImageInput
2  size="size-72
3  paddingBottom="16px"/>

Customize styles

If you want customize styles or add your own styles.

You need to make next:

1. Delete styles of component.

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

2. Add your own slyles.

1import 'url of your styles'

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

1<style scoped>
2  /* Example styles */
3
4  .border-11 {
5    border-width: 11px;
6  }
7</style>