vue-image-dangling
v1.1.0 vue component template
🌈 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
