vue九宫格翻牌抽奖活动代码

Vue移动端九宫格翻牌抽奖组件，可配置奖品、图片、转盘样式等。下面编程教程网小编给大家简单介绍一下具体实现代码！

vue组件安装

import { createApp } from "vue";
// vue
import { SquareNine } from "@nutui/nutui-bingo";
// taro
import { SquareNine } from "@nutui/nutui-bingo-taro";

const app = createApp();
app.use(SquareNine);

vue基础用法

<template>
  <nutbig-squarenine
    :prize-list="dataArr"
    :prize-id="prizeId"
    :cardImg="cardImg"
    @click="click"
  >
  </nutbig-squarenine>
</template>
<script>
  import { ref, reactive } from "vue";
  export default {
    setup() {
      const dataArr = reactive([
        {
          name: "商品名称1",
          id: 1,
          pictureUrl:"商品1.jpg",
        },
        {
          name: "商品名称2",
          id: 2,
          pictureUrl:"商品2.jpg",
        },
        {
          name: "商品名称3",
          id: 3,
          pictureUrl:"商品3.jpg",
        },
        {
          name: "商品名称4",
          id: 4,
          pictureUrl:"商品4.jpg",
        },
        {
          name: "商品名称5",
          id: 5,
          pictureUrl:"商品5.jpg",
        },
        {
          name: "商品名称6",
          id: 6,
          pictureUrl:"商品6.jpg",
        },
        {
          name: "商品名称7",
          id: 7,
          pictureUrl:"商品7.jpg",
        },
        {
          name: "商品名称8",
          id: 8,
          pictureUrl:"商品8.jpg",
        },
      ]);
      const prizeId = ref();
      const cardImg = ref(
        "cardImg .png"
      );
      const click = () => {
        prizeId.value = 2;
      };
      return {
        dataArr,
        prizeId,
        cardImg,
        click,
      };
    },
  };
</script>