vue-image-painter icon indicating copy to clipboard operation
vue-image-painter copied to clipboard

๐Ÿ™‹โ€โ™€๏ธ Image magic animation drawing effect component for Vue 2.x | ๅ›พๅƒๅŠจๆ€็ป˜ๅˆถๆ•ˆๆžœ

vue-image-painter

English | ็ฎ€ไฝ“ไธญๆ–‡

๐ŸŒฐ Example

Demo

Demo Source Code

๐Ÿš€ QuickStart

  1. Install
yarn add vue-image-painter # OR npm i -S vue-image-painter
  1. Import
// main.js
import ImagePainter from 'vue-image-painter'
Vue.use(ImagePainter)
  1. 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

MIT

Copyright (c) 2018-present, komo