DollMachine 抓娃娃

介绍

模拟娃娃机抽奖，可配置图片、开始结束回调等。

基础用法

<template>
  <nut-doll-machine
    :prize-list="prizeList"
    :prize-index="prizeIndex"
    @start-turns="onTurnsStart()"
    @end-turns="onTurnsEnd()"
  ></nut-doll-machine>
</template>

const prizeList = reactive([
  {
    imagePath: "https://img11.360buyimg.com/imagetools/jfs/t1/147182/12/2440/6194/5f06cde6Ead240fe8/31082e30a182a5ce.png",
    text: "大鸡腿"
  },
  {
    imagePath: "https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
    text: "JOY"
  },
  {
    imagePath: "https://img11.360buyimg.com/imagetools/jfs/t1/128607/26/6643/6790/5f06cd27E9b5e15f7/7509bc7ce2da66b8.png",
    text: "VIP"
  },
  {
    imagePath: "https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png",
    text: "JOY"
  }
]);

// 中奖奖品的 index（此数据可根据后台返回的值重新赋值）
const prizeIndex = ref(0);

function onTurnsStart() {
  console.log("抽奖开始");
}

function onTurnsEnd() {
  console.log("抽奖结束");
}

API

Props

参数	说明	类型	可选值	默认值
prize-list	奖品列表（目前需要至少 4 个奖品）	Array	-	[]
default-claw	初始化爪子的图片链接	string	-	-
active-claw	爪子抓到奖品的图片链接	string	-	-
prize-index	中奖奖品在列表的索引位置（-1 未中奖）	number	-	-1
speed	速度	number	-	20

Events

事件名	说明	类型
start-turns	爪子开始下伸	() => void
end-turns	爪子已经抓到或者未抓到奖品触发	() => void