mh-wave

install

npm install mh-wave
yarn add mh-wave

Usage

作为插件使用

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值