vue-image-painter
vue-image-painter copied to clipboard
๐โโ๏ธ Image magic animation drawing effect component for Vue 2.x | ๅพๅๅจๆ็ปๅถๆๆ
vue-image-painter
English | ็ฎไฝไธญๆ
๐ฐ Example
![](https://github.com/komomoo/vue-image-painter/raw/master/demo/assets/demo.gif)
๐ QuickStart
- Install
yarn add vue-image-painter # OR npm i -S vue-image-painter
- Import
// main.js
import ImagePainter from 'vue-image-painter'
Vue.use(ImagePainter)
- Usage. Please refer to the Demo Source Code
<ImagePainter :src="https://www.images.com/a.jpg"></ImagePainter>
๐ 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
Changelog
License
Copyright (c) 2018-present, komo