Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SquareTurntable
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
吴江涛
SquareTurntable
Commits
43b9f8ef
Commit
43b9f8ef
authored
Jul 25, 2023
by
吴江涛
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新readme
parent
3822b033
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
67 additions
and
6 deletions
+67
-6
README.md
README.md
+67
-6
No files found.
README.md
View file @
43b9f8ef
### 注意事项
xxxxxxx
### 迭代日志
## 20230202 [大雁链接](https://www.bilibili.com)
+
haha
+
haha1
+
haha2
\ No newline at end of file
组件使用方式
```
react
import
SquareTurntable
from
'@src/components/SquareTurntable/SquareTurntable'
;
<
SquareTurntable
ref=
{
(
ref
)
=>
(
this
.
table
=
ref
)
}
className=
"turntable"
renderBg=
{
<
span
className=
"bg"
></
span
>
}
renderCenter=
{
<
span
className=
"logo"
></
span
>
}
prizeList=
{
this
.
state
.
prizeList
}
itemSelectImg=
{
<
span
className=
"mask"
></
span
>
}
drawApi=
{
API
.
doTurntableDraw
}
updateInfoFunction=
{
()
=>
{
console
.
log
(
"刷新数据"
);
}
}
matchInitName=
"prizeId"
matchApiName=
"prizeId"
moveTime=
{
100
}
beginIndex=
{
0
}
turnTime=
{
5000
}
addTime=
{
5
}
maxMoveTime=
{
1000
}
renderItem=
{
(
item
,
index
)
=>
{
return
(
<
div
className=
"item"
key=
{
`@${index}`
}
>
<
div
className=
"item_img_box"
>
<
img
src=
{
item
?.
icon
}
alt=
""
className=
"item_img"
/>
</
div
>
<
span
className=
"item_name"
>
{
item
?.
name
||
""
}
</
span
>
</
div
>
);
}
}
>
<
span
className=
"main_btn"
onClick=
{
this
.
handleClick
}
></
span
>
</
SquareTurntable
>
```
| 属性 | 介绍 | 是否必填 | 默认值 |
| ------------------ | ------------------------------------------------------------ | -------- | ------------------ |
| ref | 用于获取组件对象 | 是 | / |
| prizeList | 奖品列表 | 是 |
[]
|
| itemSelectImg | 被选中时奖品上方展示的内容 | 是 | "" |
| drawApi | 抽奖接口,只需给API中定义的就行 | 是 | ()=>{} |
| renderItem | 每个格子内渲染的内容 | 是 | "" |
| className | 整体转盘样式设置 | 否 | 默认占满整个父元素 |
| renderBg | 渲染转盘背景也可以渲染其他元素,将渲染在转盘底层 | 否 | "" |
| renderCenter | 渲染转盘中心位置的内容 | 否 | "" |
| updateInfoFunction | 抽奖接口成功后,会执行 | 否 | ()=>{} |
| matchInitName | 奖品渲染时,将读取该奖品item上的matchInitName属性下的值绑定在dom上,例如data-prize-id={item
[
matchInitName
]
} | 否 | "prizeId" |
| matchApiName | 抽奖接口返回的数据中用于和上方数据匹配的字段名 | 否 | "prizeId" |
| moveTime | 转盘移动间隔时间,单位ms | 否 | 100 |
| beginIndex | 转盘初次启动的索引 | 否 | 0 |
| addTime | 转盘每次移动增加的间隔时间 | 否 | 5 |
| maxMoveTime | 转盘移动一格的最长时间 | 否 | 1000 |
##### 在标签体内也可添加内容,通过插槽展示在转盘区域内
### SquareTurntable 对象
| 属性/方法 | 介绍 |
| ------------ | ------------------------------ |
| prizeRefList | 存放所有的奖品对象 |
| oldIndex | 记录上一轮结束的位置 |
| timer | 定时器,用于控制转盘转动的时间 |
| draw | 方法,转盘转动 |
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment