mh-wave

悬浮球

Usage no npm install needed!

<script type="module">
  import mhWave from 'https://cdn.skypack.dev/mh-wave';
</script>

README

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值