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抽奖组件库