1.1.0 • Published 4 years ago
vue-scratch-card-mobile v1.1.0
squeegeee
插件安装
NPM
npm install vue-scratch-card-mobile引入插件
import Vue from 'vue';
import squeegeee from 'vue-scratch-card-mobile';
Vue.use(squeegeee);使用
<Squeegeee
:coverDomId="'app'"
:canvasWarpStyle="canvasWarpStyle"
:canvasStyle="canvasStyle"
class="gua"
:coverImg="coverImg"
:coverRatio="coverRatio"
:touchArea="touchArea"
@successFn="successFn"
:again="again">
<div class="prize">中奖啦</div> //奖品div区域
</Squeegeee>API
| 参数 | 说明 | 默认值 |
|---|---|---|
| coverDomId | 滚动的父元素的ID | warp |
| canvasStyle | canvas css样式（宽高） | { height: height: '149px',width: '269px' } |
| canvasWarpStyle | canvas外面盒子 css样式（宽高） | { height: '189px',width: '309px' } |
| coverImg | 刮刮乐覆盖图 | |
| coverRatio | 刮奖占比（例 coverRatio=0.5表示刮开50%就刮奖成功） | 0.5 |
| touchArea | 刮奖手指触碰划过的范围 | 15 |
| successFn | 刮奖成功回调 | successFn () {console.log('刮完了')} |
| again | 是否继续刮奖（true：重置刮奖区域） | false |
tips: again 参数一开始是false，刮奖成功后，可以在刮奖回调successFn中设置为true，则刮刮乐会重置，可继续刮奖