更新记录

2022.0607.0000（2022-06-07）

增加中间指针旋转的配置项（mode)。

2022.0523.0001（2022-05-23）

 无语，文档中 onXx 一些都会被清除。。。

2022.0523.0000（2022-05-23）

onFinished 在文档中总被过滤掉 onFinish, 所以配合修改为 ed

平台兼容性

zy-turntable

转盘（抽奖）：通过配置进行渲染，通过 onBefore 函数返回中奖项（考虑到奖项可能是有库存的，所以不适合随机获取，应由服务器确定最终中奖的项）。

属性 props

interface ITurntableItem {
    value: any;
    text?: string;
    image?: string;
    bgColor?: string;
    textColor?: string;
}

注:

• items 设置要求在4项以上，否则会导致显示问题，不足时自动补足到4或6
• bgColors 间隔背景色分奇偶两种情况，默认已配3色，此处配置会向前叠加以确保颜色能匹配
• textColors 基本同上，根据对应的背景色可设置对应的文字颜色，一般使用黑色即可（默认）

插槽 slots

样式说明

未使用 scoped, 通过顶层样式名.zy-passwordboard就可以进行调整。

使用案例

<script setup lang="ts">
import { ref } from 'vue';
import ZyTurntable from '@/uni_modules/zy-turntable/components/zy-turntable/zy-turntable.vue';
const randomColor = () => {
    return Array(6)
        .fill(0)
        .map(i => Math.round(Math.random() * 16).toString(16))
        .join('');
};
const items = [
    { text: '感谢参与', value: null, image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=N` },
    { text: '感谢参与', value: null, image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=N` },
    { text: '感谢参与', value: null, image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=N` },
    { text: '一等奖', value: '1', image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=1` },
    { text: '二等奖', value: '2', image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=2` },
    { text: '三等奖', value: '3', image: `https://via.placeholder.com/100/${randomColor()}/FFFFFF/?text=3` }
].sort(() => 0.5 - Math.random());
const index = ref();
const tplTurntableProps = {
    items,
    // bgColors: ['#000', '#ff6400'],
    // textColors: ['#fff', '#fff'],
    // disabled: true,
    onBefore() {
        index.value = Math.round(Math.random() * (items.length - 1));
        return index.value;
    },
    onStopped() {
        uni.showToast({
            title: items[index.value].text,
            icon: 'none'
        });
    }
};
</script>

<template>
    <ZyTurntable v-bind="tplTurntableProps" />
</template>

意见反馈

有任何问题和建议，请通过评论进行留言。