image-component/vue-image-dangling

🌈 A Vue image component. Dangling interaction effect.

🌈 vue-image-dangling

A Vue image component. Dangling interaction effect.

📚 Example

Online: https://image-component.github.io/vue-image-dangling/

🌀 Template

https://github.com/one-template/vue-component-template

📦 Install

npm i vue-image-dangling
# or
yarn add vue-image-dangling

🎉 Usage

// main.js
import ImageDangling from 'vue-image-dangling'
Vue.component('image-dangling', ImageDangling)

📔 API

Property	Description	Type	Required	Default	Version
alt	The alt of the image.	string	✖	-	1.0.0
blendMode	Whether to enable mix-blend-mode. When set true, the default is soft-light. More see mix-blend-mode.	boolean | string	✖	false	1.0.0
className	Component extra class.	string	✖	-	1.0.0
hoverScale	The hover scale of the image. Require >= 1 && <=5.	number	✖	1.6	1.0.0
hoverSlope	The hover slope of the image. Require >= 10 && <=90.	number	✖	60	1.0.0
radius	The border radius of the component.	number	✖	8	1.0.0
shadeColor	To set the mixed background color when use blendMode.	string	✖	#000	1.1.0
src	The src of the image.	string	✔	-	1.0.0
width	The width of the image.	number	✖	300	1.0.0

🔨 Development

yarn
yarn start

License

MIT