更新记录

1.4.9（2024-05-31）

添加最新的使用示例

1.4.8（2024-05-31）

可以自定义选中样式，具体看props中的参数

1.4.7（2024-05-31）

删除没有用的代码

平台兼容性

uni-app

uni-app x

zf-turntable-box

如果该插件对您有帮助，麻烦收藏评价鼓励一下作者

props参数说明

使用示例

<template>
  <view>
    <zf-turntable-box
      ref="turntableRef"
      @chooseFn="chooseFn"
      :isClick="isClick"
      :cjMap="list"
      :chooseIndexDefalt="chooseIndexDefalt"
    ></zf-turntable-box>
  </view>
</template>
<script setup>
import { ref } from "vue";
// 奖项集合
const list = ref([
  { icon: "./icon1.png", desc: "3个月VIP", type: 1 },
  { icon: "./icon2.png", desc: "一件T桖", type: 1 },
  { icon: "./icon3.png", desc: "一个背包", type: 1 },
  { icon: "./icon4.png", desc: "一个杯子", type: 1 },
  { icon: "./icon5.png", desc: "谢谢参与", type: 1 },
  { icon: "./icon6.png", desc: "书一本", type: 1 },
  { icon: "./icon7.png", desc: "40元代金券", type: 1 },
  { icon: "./icon8.png", desc: "一个鼠标", type: 1 },
]);
const turntableRef = ref(null);
// 是否可以点抽奖按钮
const isClick = ref(true);
//这里是后端返回的奖项集合中能够中奖的集合中中奖的下标;
const chooseIndexDefalt = ref(0);
// 接受抽奖后传递抽中的值
const chooseFn = (e) => {
  //抽奖结束后禁用抽奖按钮功能//isClick.value = false
  console.log(e);
  uni.showToast({
    title:JSON.parse(e).desc,
    icon:'none'
  })
};
</script>