Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/komomoo/vue-image-painter
๐โโ๏ธ Image magic animation drawing effect component for Vue 2.x | ๅพๅๅจๆ็ปๅถๆๆ
https://github.com/komomoo/vue-image-painter
image image-drawer image-painter img-draw vue
Last synced: about 2 months ago
JSON representation
๐โโ๏ธ Image magic animation drawing effect component for Vue 2.x | ๅพๅๅจๆ็ปๅถๆๆ
- Host: GitHub
- URL: https://github.com/komomoo/vue-image-painter
- Owner: komomoo
- License: mit
- Created: 2019-07-05T03:19:53.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-19T08:55:01.000Z (over 2 years ago)
- Last Synced: 2024-03-21T15:14:43.163Z (3 months ago)
- Topics: image, image-drawer, image-painter, img-draw, vue
- Language: Vue
- Homepage: https://wannaxiao.github.io/vue-image-painter/demo/dist/
- Size: 1.75 MB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vue - vue-image-painter - ๐ Image magic animation drawing effect component for Vue 2.x. (Components & Libraries / UI Components)
README
# vue-image-painter
English | [็ฎไฝไธญๆ](./README.zh-CN.md)
## ๐ฐ Example
[Demo](https://komomoo.github.io/vue-image-painter/demo/dist/)
[Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
## ๐ QuickStart
1. Install
```bash
yarn add vue-image-painter # OR npm i -S vue-image-painter
```
2. Import
```js
// main.js
import ImagePainter from 'vue-image-painter'
Vue.use(ImagePainter)
```
3. Usage. Please refer to the [Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
```html
```
## ๐ API
### Props
| Name | Description | Type | Default |
| --------- | --------------------------------------------------------------------------- | ------- | --------- |
| src | image URL. local images must be used `require('')` | String | undefined |
| alt | image alt | String | undefined |
| animation | animation effect. optional key: 'draw'๏ผ'blur' | String | 'draw' |
| duration | animation duration. unit: ms | Number | 4000 |
| immediate | display images and animations immediately, don't wait for the image to load | Boolean | false |
### Events
| Name | Description | Parameters |
| --------- | ---------------- | ---------- |
| loadStart | image load start | null |
| loadEnd | image load end | null |
### Slots
| Name | Description |
| ------- | ------------------------------------------------------------- |
| default | The content ImagePainter displays, before the image is loaded |
---
๐๐ If it is helpful to you๏ผplease encourage me with a โญ๏ธStar ~
## Inspiration
- [ImageDrawer.js](https://github.com/UstymUkhman/ImageDrawer.js)
## [Changelog](./CHANGELOG.md)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, komo