NutUI-Bingo 的使用

1: 首先你的下载 NutUI-Bingo 

npm install @nutui/nutui-bingo

2: 按需导入想使用的插件  这边展示的是  Marquee 跑马灯抽奖  在main.ts文件中导入如下

import { createApp } from 'vue';
// vue
import { Marquee } from '@nutui/nutui-bingo';

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

注意: 这边我们需要在man.ts文件导入 NutUI-Bingo  样式

import "@nutui/nutui-bingo/dist/style.css";

3: 使用页面的HTML代码

<nutbig-marquee
              :prize-list="prizeList"
              :prize-index="prizeIndex"
              :speed="100"
              :circle="40"
              @start-turns="startTurns"
              @end-turns="endTurns"
            >
</nutbig-marquee>

4: 使用页面的ts代码

// 转盘上要展示的奖品数据
const prizeList = ref([
  {
    id: "xiaomi",
    prizeName: "小米手机",
    prizeImg:
      "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png",
  },
  {
    id: "blue",
    prizeColor: "rgb(251, 219, 216)",
    prizeName: "蓝牙耳机",
    prizeImg:
      "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg",
  },
  {
    id: "thanks",
    prizeName: "谢谢参与",
    prizeImg:
      "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
  },
  {
    id: "apple",
    prizeName: "apple watch",
    prizeImg:
      "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png",
  },
  {
    id: "fruit",
    prizeColor: "rgba(246, 142, 46, 0.5)",
    prizeName: "迪士尼苹果",
    prizeImg:
      "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png",
  },
  {
    id: "thanks",
    prizeName: "谢谢参与",
    prizeImg:
      "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
  },
  {
    id: "fish",
    prizeName: "海鲜套餐",
    prizeImg:
      "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png",
  },
  {
    id: "thanks",
    prizeName: "谢谢参与",
    prizeImg:
      "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
  },
]);
// 转盘样式的选项
const styleOpt = reactive({
  prizeItem: {},
  startStyle: {},
  contentBg: {
    background: "rgb(255, 231, 149)",
  },
});
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
const prizeIndex = ref(0);
const startTurns = () => {
  const index = Math.floor(Math.random() * prizeList.value.length);
  prizeIndex.value = index;
};
const endTurns = () => {
  // alert("中奖了");
  console.log("中奖了");
};
return {
 prizeList,
 styleOpt,
 prizeIndex,
 startTurns,
 endTurns,
};

温馨提示: 这边如果你是在script标签直接挂在setup, 就可以把上面代码块里面 return 掉的属性注释掉.

其他组件组件均可以使用这种方法导入

组件库跳转:  NutUI-Bingo - 移动端Vue抽奖组件库