九宫格 <LuckyGrid />

属性

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

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

rows?: string | number 设置布局有几行 默认为: 3

cols?: string | number 设置布局有几列 默认为: 3

背景 - 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> 奖品列表

x: number 相对坐标 x

y: number 相对坐标 y

col?: number 横向合并格子 默认为: 1

row?: number 纵向合并格子 默认为: 1

range?: number 中奖概率

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

shadow?: string 格子阴影

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

activeSrc?: string 中奖时的图片路径

抽奖按钮 - buttons

buttons?: Array<object> 抽奖按钮

x: number 相对坐标 x

y: number 相对坐标 y

col?: number 横向合并格子 默认为: 1

row?: number 纵向合并格子 默认为: 1

range?: number 中奖概率

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

shadow?: string 格子阴影

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

默认配置 - defaultConfig

default-config?: object 默认配置

gutter?: number 格子之间的缝隙 默认为: 5

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

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

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

默认样式 - defaultStyle

default-style?: object 默认样式

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

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

shadow?: 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

中奖标记样式 - activeStyle

active-style?: object 中奖标记样式

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

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

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

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

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

shadow?: string 格子阴影

回调函数 - callback

start?: (e, button) => void 开始抽奖前

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

方法 - methods

init() 初始化

play() 开始抽奖

stop(index: number) 缓慢停止