0.2.0 • Published 4 years ago

vuewaterwaves v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

waterwaves


一个vue水球插件

演示动图

Demo

https://sortablejs.github.io/Vue.Draggable/

插件的安装

With npm or yarn

npm i -S waterwaves
yarn add waterwaves

引入插件

import WaterWaves from 'waterwaves'

Vue.use(WaterWaves)

or

<script src="node_modules/vuewaterwaves/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|Number50
options配置选项Object见下表

options

参数说明类型默认值
wrapW外边距Number3
cWNumber130
cHNumber130
baseY液面高度Number20
nowRange液面起始位置Number0
lineColor线条颜色string'rgb(176,204,53)'
oneColor上层颜色string'rgba(176,204,53,.6)'
twoColor底层颜色string'rgba(176,204,53,.4)'
oneWaveWidth上层波长(数越小越宽)Number0.06
twoWaveWidth底层波长Number0.06
oneWaveHeight上层波峰(数越大越高)Number4
twoWaveHeight底层波峰Number4
oneOffsetX上层波浪x轴偏移量Number10
oneOffsetX底层波浪x轴偏移量Number20
speed波浪滚动速度(数越大越快)Number0.2

event

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

4 years ago