Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitrii1548/vue-image-input
This is a simple input for image. Created with vuejs
https://github.com/dmitrii1548/vue-image-input
component image image-input input javascript javascript-library js library npm npm-package npmjs package picture vue vue-component vue-component-library vue3 vue3-picture-input vuejs
Last synced: about 1 month ago
JSON representation
This is a simple input for image. Created with vuejs
- Host: GitHub
- URL: https://github.com/dmitrii1548/vue-image-input
- Owner: DMITRII1548
- License: mit
- Created: 2023-06-23T12:01:11.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-20T13:58:38.000Z (about 2 months ago)
- Last Synced: 2024-11-20T14:11:33.101Z (about 2 months ago)
- Topics: component, image, image-input, input, javascript, javascript-library, js, library, npm, npm-package, npmjs, package, picture, vue, vue-component, vue-component-library, vue3, vue3-picture-input, vuejs
- Language: CSS
- Homepage:
- Size: 122 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/DMITRII1548/Vue-Image-Input/issues) and create a new issue.
## Support project
If you like this project, please put a star on [GitHub](https://github.com/DMITRII1548/Vue-Image-Input)
## What's new?
1. Added required 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
```html
// src/App.vue
Show
import { VueImageInput } from 'vue3-picture-input'
import "vue3-picture-input/style.css"
export default {
name: 'App',
components: {
VueImageInput,
},
}
```
### Composition API
```html
Show
import { VueImageInput } from 'vue3-picture-input'
import "vue3-picture-input/style.css"
```
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
```html
Show
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,
},
}
```
### Composition API
```html
Show
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)
}
```
## 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:
```html
```
### textColor
Text color for title
Example usage:
```html
```
### 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:
```html
```
### bgRounded
Round background of this component.
Example usage:
```html
```
### imageRounded
Thank this prop you can round an image
Example usage:
```html
```
### 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
```html
```
### mimes
Accepted types of files
// default ".jpg,.png"
Example usage:
```html
```
### required
Is required field. Params true of false
// default false
Example usage:
```html
```
### title
This is a text at your component
// default "Drop here"
### fontSize
Font size of your title
Example usage:
```html
```
### padding
Padding of the container component
Example usage:
```html
```
### 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:
```html
```
### paddingRight
Padding right of the container component
Example usage:
```html
```
### paddingTop
Padding top of the container component
Example usage:
```html
```
### paddingBottom
Padding bottom of the container component
Example usage:
```html
```
## Customize styles
If you want customize styles or add your own styles.
You need to make next:
1. Delete styles of component.
```js
// import "vue3-picture-input-test/style.css"
```
2. Add your own slyles.
```js
import 'url of your styles'
```
Or you can write styles in your style tag in your component.
```html
/* Example styles */
.border-11 {
border-width: 11px;
}
```