canvas制作刮刮卡

scrapingCard canvas刮刮卡

精彩就在uniapp插件市场
https://ext.dcloud.net.cn/plugin?id=7108

使用方法：

<scrapingCard :resultList="resultList" ref="reset" />

import scrapingCard from '../../components/piaoyi-cityPicker/pioayi-scrapingCard.vue'
export default {
    components: {
        scrapingCard
    },
    data() {
        return {
        	resultList: {
		    type: Array,
			default: () => [{
				content: '特等奖',
				probability: 0.05
			},{
				content: '一等奖',
				probability: 0.1
			},{
				content: '二等奖',
				probability: 0.2
			},{
				content: '三等奖',
				probability: 0.3
			}]
		}
        }
    },
    methods: {
    	//重置刮刮卡
    	reset () {
        	this.$refs.reset.init()
        }
    }
}

事件说明

事件名	返回值	描述
reset	无	使用ref调用组件init事件重置刮刮卡

Prop

参数名称	描述
resultList	类型是数组对象，probability是content内容出现的概率，content是刮刮卡的内容