waterwaves

一个vue水球插件

Demo

http://acdtech.top/waterWaves/

插件的安装

With npm or yarn

npm i -S waterwaves
yarn add waterwaves

引入插件

import WaterWaves from 'waterwaves'

Vue.use(WaterWaves)

or

<script src="node_modules/waterwaves/scripts/WaterPolo.umd.min.js"></script>

基本用法

<WaterWaves v-model="level" />

or

<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
  var option={
      cW:130,
      cH:130,
      baseY:50,
      nowRange:0
  };
  var water=new WaterPolo('canvas',option);
</script>

API

参数|说明|类型|默认值 -|-|-|- v-model|绑定值（液面高度百分比）|String|Number|50 options|配置选项|Object|见下表

options

参数|说明|类型|默认值 -|-|-|- wrapW|外边距|Number|3 cW|宽|Number|130 cH|高|Number|130 baseY|液面高度|Number|20 nowRange|液面起始位置|Number|0 lineColor|线条颜色|string|'rgb(176,204,53)' oneColor|上层颜色|string|'rgba(176,204,53,.6)' twoColor|底层颜色|string|'rgba(176,204,53,.4)' oneWaveWidth|上层波长（数越小越宽）|Number|0.06 twoWaveWidth|底层波长|Number|0.06 oneWaveHeight|上层波峰（数越大越高）|Number|4 twoWaveHeight|底层波峰|Number|4 oneOffsetX|上层波浪x轴偏移量|Number|10 oneOffsetX|底层波浪x轴偏移量|Number|20 speed|波浪滚动速度（数越大越快）|Number|0.2

event

事件名称|说明|回调参数 -|-|- change|在v-model值改变时触发|(value: number|string)