0.1.4 • Published 6 years ago
mh-wave v0.1.4
mh-wave
install
npm install mh-wave
yarn add mh-waveUsage
作为插件使用
import Vue from 'vue'
import VueWave from 'mh-wave'
Vue.use(VueWave)局部注册组件
<template>
<single-wave :rate="rate" />
<double-wave :rate="rate" />
</template>import { SingleWave, DoubleWave } from 'mh-wave'
new Vue({
el: '#root',
components: {
SingleWave,
DoubleWave
},
data: {
rate: 50
}
})SingleWave
props
| Name | Type | Default | Desctiption |
|---|---|---|---|
| rate | Number | 0 | 比例值 |
| gap | Number/String | 5 | 内外圆间距 |
| width | Number/String | 100 | 悬浮球宽度 |
| borderColor | String | green | 边框颜色 |
| borderWidth | Number/String | 3 | 边框宽度 |
| waveColor | String/Function | green | 波浪颜色,设置为Function时,可接收rate为参数,根据rate设置颜色 |
| justifyContent | String | center | |
| alignItems | String | center | |
DoubleWave
props
| Name | Type | Default | Description |
|---|---|---|---|
| rate | Number | 0 | 比例值 |
| waveRadius | Number/String | 70px | 水波半径 |
| circleHeight | Number/String | 200px | 圆球高度 |
| waveColor | String/Function | green | 波浪颜色,设置为Function时,可接收rate为参数,根据rate设置颜色 |
| initialColor | String | #fff | rate为0时的颜色 |
| fullRate | Number | 100 | 最大rate值 |