更新记录

1.0.0(2024-03-12)

init


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.91 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

c-scratch-card

  • c-scratch-card 刮刮卡

c-design交流群号:330647926

示例预览

https://static-mp-eeab6da6-80cd-4e80-844a-66b2a7203834.next.bspapp.com/cdesign/index.html#/pagesMarketing/scratchCard/scratchCard

一、使用示例

<template>
    <view>
        <c-scratch-card ref="cScratchCardRef" @open="onOpen" @ready="onReady">
            <view  style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
                恭喜中奖 iPhone 15Pro MAx
            </view>
        </c-scratch-card>
        <view class="content">
            <view class="btnBox">
                <button @click="$refs.cScratchCardRef.init()" size="mini">重置</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show:false
            };
        },
        methods:{
            onOpen(){
                console.log('图层已经刮开一半');
            },
            onReady(){
                console.log('ready');
            }
        }
    }
</script>

<style lang="scss">
.content{
        padding: 20rpx 14rpx;
        font-size: 28rpx;
    }
    .btnBox{
        width: 100%;
        display: flex;align-items: center;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
    }
</style>

二、Props

字段 类型 必填 默认值 描述
canvasId String 'c' + uuid(18) 画布id
lineWidth Number 20 画笔宽度
width String 750rpx 图像宽度 单位rpx/px
height String 750rpx 图像高度 单位rpx/px
text String 刮刮卡 涂层上的文字 设置图层图片时失效
textSize Number 24 涂层上的文字的大小 设置图层图片时失效
textColor String #ffffff 涂层上的文字的颜色 设置图层图片时失效
bgColor String #666666 涂层颜色 设置图层图片时失效
bgSrc String 涂层图片地址
disabled Boolean false 是否禁止刮开涂层
prizeName String 奖品名称 可通过插槽替换该区域

三、Event

字段 描述
ready 初始化完成
open 被刮开一半

四、Methods

字段 描述
init 重新初始化/重置

四、Slot

字段 描述
default 奖品区域

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问