act-slot-machine

slot machine

Install

npm install

Example

<template>
    <SlotMachine 
        :type="type"
        :stop="stop"
        :height="height"
        :list="list"
        :targetNumber="targetNumber"
        :change="change"
        :reset="reset"
        :needScroll="needScroll"
        :cover="cover"
        @listener="listener"
        :coverSrc="coverSrc"
        :coverStr="coverStr"
        :bgColor="bgColor"
        :color="color"
        :fontFamily="fontFamily"
        :fontSize="fontSize"
    ></SlotMachine>
</template>

<script>
import SlotMachine from 'act-slot-machine';
export default {
    name: 'main',
    data () {
        return {
            // 不传默认卡片为纯数字或文案，传入image则默认渲染为图片
            type: '',
            // 停止快速滚动
            stop: false,
            // 滚动区域的高度
            height: '1rem',
            // 需要循环的数组，也可统一传入对应图片路径
            list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            targetNumber: 1,
            // 是否开始加速转动
            change: false,
            // 恢复初始状态
            reset: false,
            // 自行慢速滚动
            needScroll: true,
            // 是否展示未滚动时封面
            cover: false,
            // 封面图路径
            coverSrc: require('./../images/1.png'),
            // 封面若为文案
            coverStr: '123',
            // 滚动区域背景色
            bgColor: '',
            // 滚动区域字体颜色
            color: 'red',
            // 滚动区域字体
            fontFamily: '黑体',
            // 滚动区域字体大小
            fontSize: '44px',
        }
    },
    methods: {
        // 动画结束后触发函数
        listener () {
            console.log('动画结束了');
        }
    },
    components: {
        SlotMachine
    },

}
</script>
<style scope>
</style>