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，则刮刮乐会重置，可继续刮奖