查看手机演示

刮刮卡

平台兼容

H5	微信小程序	APP(ios/Android)
√	√	√

属性说明

属性	类型	说明
percentage	Number	刮开百分之多少的时候开奖 ，默认45
touchSize	Number	刮痕的宽度，默认20
fillColor	String	未刮开图层时的填充色
watermark	String	水印文字，默认“刮一刮”
watermarkColor	String	水印文字颜色
watermarkSize	Number	水印文字大小，默认14
title	String	标题，默认：刮一刮开奖
titleColor	String	标题颜色
titleSize	Number	标题文字大小，默认24
disabled	boolean	是否禁止刮卡
@success	function	刮卡完成回调事件
@start	function	刮卡开始回调事件(手指首次触碰移动)
v-slot	默认插槽	刮卡显示的内容，本内容将被刮刮卡覆盖遮挡，刮刮后显示
init()	重置刮刮卡方法	通过调用该方法，重置到初始状态

代码演示

<template>
  <view class="content padding">

    <view style="width:400rpx;heigth:300rpx">
      <k-scratch ref="card" @success="seatShow" @start="startCard" :disabled="disabled" title="超级赛事刮刮乐" watermark="刮一刮开号"
        style="heigth:100%">
         <image src="/KMUI.png" mode="widthFix" style="width: 50%;"></image> 
         <view>
           这是组件开奖内容插槽
         </view> 
      </k-scratch>
    </view>


   <button type="primary" class="btn" @click="reset">再来一次</button>
    <button type="warn" class="btn" :class="{'yellow':disabled}" @click="disabled=!disabled">{{disabled?'允许':'禁止'}}-刮卡</button>

  <view class="margin" v-if="value && !disabled">
    当前触发状态：{{value}}
  </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        disabled:false
      };
    },
    methods: {
      //清空图层
      reset() {
        this.$refs.card.init();
      },
      startCard(){
        this.value='刮卡开始'
        console.log('刮卡开始');
      },

      seatShow(){
        this.value='刮卡完成'
        console.log('刮卡完成');
      },

    },
  }
</script>