老虎机 <SlotMachine />

属性

width: string | number 组件宽度 默认为: 300px

height: string | number 组件高度 默认为: 300px

背景 - blocks

blocks?: Array<object> 背景区域

borderRadius?: string | number 圆角半径 默认为: 0px

background?: string 背景颜色 默认为: 透明色

padding?: string | number 内边距 默认为: 0px

imgs?: Array<object> 背景图片

src: string 图片路径

top?: string | number 图片位置 默认为: 0px

width?: string | number 图片宽度 默认为: 0px

height?: string | number 图片高度 默认为: 0px

奖品 - prizes

prizes?: Array<object> 奖品列表

borderRadius?: string | number 格子圆角半径 默认为: 20px

background?: string 背景颜色 默认为: 透明色

fonts?: Array<object> 奖品文字

text: string 文字内容

top?: string | number 文字位置 默认为: 0px

fontColor?: string 字体颜色 默认为: 黑色 #000

fontSize?: string | number 字体大小 默认为: 22px

fontStyle?: string 字体样式 默认为: sans-serif

fontWeight?: string | number 字体粗细 默认为: 400

lineHeight?: string | number 字体行高 默认为: 字体大小

wordWrap?: boolean 文字自动换行 默认为: true 开启

lengthLimit?: string | number 换行宽度范围 默认为: 90%

lineClamp?: number 文本溢出隐藏 默认为: Infinity

imgs?: Array<object> 奖品图片

src: string 图片路径

top?: string | number 图片位置 默认为: 0px

width?: string | number 图片宽度 默认为: 0px

height?: string | number 图片高度 默认为: 0px

插槽 - slots

slots?: Array<object> 插槽列表

order?: Array<number> 奖品排列顺序 默认为: 所有奖品

speed?: number 插槽的旋转速度 默认为: 20

direction?: 1 | -1 旋转方向 默认为: 1

默认配置 - defaultConfig

default-config?: object 默认配置

rowSpacing?: string | number 格子行间距 默认为: 0px

colSpacing?: string | number 格子列间距 默认为: 0px

mode?: 'vertical' | 'horizontal' 旋转模式 默认为: vertical

direction?: 1 | -1 旋转方向 默认为: 1

speed?: number 旋转速度峰值 默认为: 20

accelerationTime?: number 开始旋转时间 默认为: 2500

decelerationTime?: number 缓慢停止时间 默认为: 2500

默认样式 - defaultStyle

default-style?: object 默认样式

borderRadius?: string | number 格子圆角 默认为: 20px

background?: string 格子背景颜色 默认为: 透明色

fontColor?: string 字体颜色 默认为: 黑色 #000

fontSize?: string | number 字体大小 默认为: 22px

fontStyle?: string 字体样式 默认为: sans-serif

fontWeight?: string | number 字体粗细 默认为: 400

lineHeight?: string | number 字体行高 默认为: 字体大小

wordWrap?: boolean 文字自动换行 默认为: true 开启

lengthLimit?: string | number 换行宽度范围 默认为: 90%

lineClamp?: number 文本溢出隐藏 默认为: Infinity

回调函数 - callback

end?: (prize) => void 结束抽奖后

方法 - methods

init() 初始化

play() 开始抽奖

stop(index: number) 缓慢停止