0.2.3 • Published 5 years ago
waterwaves v0.2.3
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) |