Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
10106795
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
10106795
编写于
11月 10, 2021
作者:
L
liuyijun
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: review修复barrage组件
上级
378732e1
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
33 addition
and
33 deletion
+33
-33
src/packages/barrage/barrage.scss
src/packages/barrage/barrage.scss
+1
-1
src/packages/barrage/barrage.tsx
src/packages/barrage/barrage.tsx
+18
-18
src/packages/barrage/demo.tsx
src/packages/barrage/demo.tsx
+7
-7
src/packages/barrage/doc.md
src/packages/barrage/doc.md
+7
-7
未找到文件。
src/packages/barrage/barrage.scss
浏览文件 @
10106795
...
...
@@ -7,7 +7,7 @@
overflow
:
hidden
;
box-sizing
:
border-box
;
background-color
:
#f7f8fa
;
.
dm
item
{
.
barrage-
item
{
width
:
100px
;
// max-width: 150px;
display
:
block
;
...
...
src/packages/barrage/barrage.tsx
浏览文件 @
10106795
...
...
@@ -6,7 +6,7 @@ import './barrage.scss'
export
interface
BarrageProps
{
className
:
string
style
:
React
.
CSSProperties
danmu
:
Array
<
string
>
barrageList
:
Array
<
string
>
frequency
:
number
loop
:
boolean
speeds
:
number
...
...
@@ -14,7 +14,7 @@ export interface BarrageProps {
top
:
number
}
const
defaultProps
=
{
danmu
:
[
''
],
barrageList
:
[
],
frequency
:
500
,
loop
:
true
,
speeds
:
2000
,
...
...
@@ -22,13 +22,13 @@ const defaultProps = {
top
:
10
,
}
const
InternalBarrage
:
ForwardRefRenderFunction
<
unknown
,
Partial
<
BarrageProps
>>
=
(
props
,
ref
)
=>
{
const
{
className
,
frequency
,
loop
,
danmu
,
speeds
,
rows
,
top
,
...
restProps
}
=
{
const
{
className
,
frequency
,
loop
,
barrageList
,
speeds
,
rows
,
top
,
...
restProps
}
=
{
...
defaultProps
,
...
props
,
}
const
dm
Body
=
useRef
<
HTMLDivElement
>
(
null
)
const
dm
Container
=
useRef
<
HTMLDivElement
>
(
null
)
const
danmu
CWidth
=
useRef
(
0
)
const
barrage
Body
=
useRef
<
HTMLDivElement
>
(
null
)
const
barrage
Container
=
useRef
<
HTMLDivElement
>
(
null
)
const
barrage
CWidth
=
useRef
(
0
)
const
timer
=
useRef
(
0
)
const
index
=
useRef
(
0
)
...
...
@@ -37,14 +37,14 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
useImperativeHandle
(
ref
,
()
=>
({
add
:
(
word
:
string
)
=>
{
const
_index
=
index
.
current
%
danmu
.
length
danmu
.
splice
(
_index
,
0
,
word
)
const
_index
=
index
.
current
%
barrageList
.
length
barrageList
.
splice
(
_index
,
0
,
word
)
},
}))
useEffect
(()
=>
{
if
(
dm
Body
.
current
)
{
danmuCWidth
.
current
=
dm
Body
.
current
.
offsetWidth
if
(
barrage
Body
.
current
)
{
barrageCWidth
.
current
=
barrage
Body
.
current
.
offsetWidth
run
()
}
return
()
=>
{
...
...
@@ -61,11 +61,11 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
}
const
play
=
()
=>
{
const
_index
=
loop
?
index
.
current
%
danmu
.
length
:
index
.
current
const
_index
=
loop
?
index
.
current
%
barrageList
.
length
:
index
.
current
let
el
=
document
.
createElement
(
`div`
)
el
.
innerHTML
=
danmu
[
_index
]
as
string
el
.
classList
.
add
(
'
dm
item
'
)
;(
dm
Container
.
current
as
HTMLDivElement
).
appendChild
(
el
)
el
.
innerHTML
=
barrageList
[
_index
]
as
string
el
.
classList
.
add
(
'
barrage-
item
'
)
;(
barrage
Container
.
current
as
HTMLDivElement
).
appendChild
(
el
)
const
width
=
el
.
offsetWidth
const
height
=
el
.
offsetHeight
...
...
@@ -73,17 +73,17 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
el
.
style
.
animationDuration
=
`
${
speeds
}
ms`
el
.
style
.
top
=
(
_index
%
rows
)
*
(
height
+
top
)
+
20
+
'
px
'
el
.
style
.
width
=
width
+
20
+
'
px
'
el
.
style
.
setProperty
(
'
--move-distance
'
,
`-
${
danmu
CWidth
.
current
}
px`
)
el
.
style
.
setProperty
(
'
--move-distance
'
,
`-
${
barrage
CWidth
.
current
}
px`
)
el
.
dataset
.
index
=
`
${
_index
}
`
el
.
addEventListener
(
'
animationend
'
,
()
=>
{
;(
dm
Container
.
current
as
HTMLDivElement
).
removeChild
(
el
)
;(
barrage
Container
.
current
as
HTMLDivElement
).
removeChild
(
el
)
})
index
.
current
++
}
return
(
<
div
className
=
{
classes
}
ref
=
{
dm
Body
}
{
...
restProps
}
>
<
div
ref
=
{
dmContainer
}
className
=
"dm
Container"
></
div
>
<
div
className
=
{
classes
}
ref
=
{
barrage
Body
}
{
...
restProps
}
>
<
div
ref
=
{
barrageContainer
}
className
=
"b
Container"
></
div
>
</
div
>
)
}
...
...
src/packages/barrage/demo.tsx
浏览文件 @
10106795
...
...
@@ -4,17 +4,17 @@ import { Barrage } from './barrage'
import
Button
from
'
@/packages/button
'
import
'
./demo.scss
'
interface
danmu
RefState
{
interface
barrage
RefState
{
add
:
(
word
:
string
)
=>
void
}
const
BarrageDemo
=
()
=>
{
let
list
=
[
'
画美不看
'
,
'
不明觉厉
'
,
'
喜大普奔
'
,
'
男默女泪
'
,
'
累觉不爱
'
,
'
爷青结-
'
]
const
danmuRef
=
useRef
<
danmu
RefState
>
(
null
)
const
add
Danmu
=
()
=>
{
const
barrageRef
=
useRef
<
barrage
RefState
>
(
null
)
const
add
Barrage
=
()
=>
{
let
n
=
Math
.
random
()
if
(
danmu
Ref
.
current
)
{
danmu
Ref
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
if
(
barrage
Ref
.
current
)
{
barrage
Ref
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
}
}
return
(
...
...
@@ -22,10 +22,10 @@ const BarrageDemo = () => {
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
Cell
>
<
Barrage
ref
=
{
danmuRef
}
danmu
=
{
list
}
></
Barrage
>
<
Barrage
ref
=
{
barrageRef
}
barrageList
=
{
list
}
></
Barrage
>
</
Cell
>
<
div
className
=
"test"
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
add
Danmu
}
>
<
Button
type
=
"danger"
onClick
=
{
add
Barrage
}
>
随机添加
</
Button
>
</
div
>
...
...
src/packages/barrage/doc.md
浏览文件 @
10106795
...
...
@@ -17,20 +17,20 @@ import { Barrage } from '@nutui/nutui-react';
```
tsx
<
h2
>
基础用法
</
h2
>
<
Cell
>
<
Barrage
ref
=
{
danmuRef
}
danmu
=
{
list
}
></
Barrage
>
<
Barrage
ref
=
{
barrageRef
}
barrageList
=
{
list
}
></
Barrage
>
</
Cell
>
<
div
className
=
"test"
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
Button
type
=
"danger"
onClick
=
{
add
Danmu
}
>
随机添加
</
Button
>
<
Button
type
=
"danger"
onClick
=
{
add
Barrage
}
>
随机添加
</
Button
>
</
div
>
```
```
tsx
let
list
=
[
'
画美不看
'
,
'
不明觉厉
'
,
'
喜大普奔
'
,
'
男默女泪
'
,
'
累觉不爱
'
,
'
爷青结-
'
]
const
danmuRef
=
useRef
<
danmuRefState
>
(
null
)
const
add
Danmu
=
()
=>
{
const
barrageRef
=
useRef
(
null
)
const
add
Barrage
=
()
=>
{
let
n
=
Math
.
random
()
if
(
danmu
Ref
.
current
)
{
danmu
Ref
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
if
(
barrage
Ref
.
current
)
{
barrage
Ref
.
current
.
add
(
'
随机——
'
+
String
(
n
).
substr
(
2
,
10
))
}
}
```
...
...
@@ -43,7 +43,7 @@ const addDanmu = () => {
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
|
danmu
| 弹幕列表数据 | Array | [] |
|
barrageList
| 弹幕列表数据 | Array | [] |
| frequency | 可视区域内每个弹幕出现的时间间隔 | Number | 500 |
| speeds | 每个弹幕的滚动时间 | Number | 2000 |
| rows | 弹幕行数,分几行展示 | Number | 1 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录