From 10106795f928a7c1ec60bdf5752a967e9327f978 Mon Sep 17 00:00:00 2001 From: liuyijun <3476078473@qq.com> Date: Wed, 10 Nov 2021 15:59:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20review=E4=BF=AE=E5=A4=8Dbarrage=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/barrage/barrage.scss | 2 +- src/packages/barrage/barrage.tsx | 36 +++++++++++++++---------------- src/packages/barrage/demo.tsx | 14 ++++++------ src/packages/barrage/doc.md | 14 ++++++------ 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss index f7f2045..26759c2 100644 --- a/src/packages/barrage/barrage.scss +++ b/src/packages/barrage/barrage.scss @@ -7,7 +7,7 @@ overflow: hidden; box-sizing: border-box; background-color: #f7f8fa; - .dmitem { + .barrage-item { width: 100px; // max-width: 150px; display: block; diff --git a/src/packages/barrage/barrage.tsx b/src/packages/barrage/barrage.tsx index db19dd2..e13c474 100644 --- a/src/packages/barrage/barrage.tsx +++ b/src/packages/barrage/barrage.tsx @@ -6,7 +6,7 @@ import './barrage.scss' export interface BarrageProps { className: string style: React.CSSProperties - danmu: Array + barrageList: Array 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> = (props, ref) => { - const { className, frequency, loop, danmu, speeds, rows, top, ...restProps } = { + const { className, frequency, loop, barrageList, speeds, rows, top, ...restProps } = { ...defaultProps, ...props, } - const dmBody = useRef(null) - const dmContainer = useRef(null) - const danmuCWidth = useRef(0) + const barrageBody = useRef(null) + const barrageContainer = useRef(null) + const barrageCWidth = useRef(0) const timer = useRef(0) const index = useRef(0) @@ -37,14 +37,14 @@ const InternalBarrage: ForwardRefRenderFunction> 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 (dmBody.current) { - danmuCWidth.current = dmBody.current.offsetWidth + if (barrageBody.current) { + barrageCWidth.current = barrageBody.current.offsetWidth run() } return () => { @@ -61,11 +61,11 @@ const InternalBarrage: ForwardRefRenderFunction> } 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('dmitem') - ;(dmContainer.current as HTMLDivElement).appendChild(el) + el.innerHTML = barrageList[_index] as string + el.classList.add('barrage-item') + ;(barrageContainer.current as HTMLDivElement).appendChild(el) const width = el.offsetWidth const height = el.offsetHeight @@ -73,17 +73,17 @@ const InternalBarrage: ForwardRefRenderFunction> 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', `-${danmuCWidth.current}px`) + el.style.setProperty('--move-distance', `-${barrageCWidth.current}px`) el.dataset.index = `${_index}` el.addEventListener('animationend', () => { - ;(dmContainer.current as HTMLDivElement).removeChild(el) + ;(barrageContainer.current as HTMLDivElement).removeChild(el) }) index.current++ } return ( -
-
+
+
) } diff --git a/src/packages/barrage/demo.tsx b/src/packages/barrage/demo.tsx index 1084a90..fa63a22 100644 --- a/src/packages/barrage/demo.tsx +++ b/src/packages/barrage/demo.tsx @@ -4,17 +4,17 @@ import { Barrage } from './barrage' import Button from '@/packages/button' import './demo.scss' -interface danmuRefState { +interface barrageRefState { add: (word: string) => void } const BarrageDemo = () => { let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-'] - const danmuRef = useRef(null) - const addDanmu = () => { + const barrageRef = useRef(null) + const addBarrage = () => { let n = Math.random() - if (danmuRef.current) { - danmuRef.current.add('随机——' + String(n).substr(2, 10)) + if (barrageRef.current) { + barrageRef.current.add('随机——' + String(n).substr(2, 10)) } } return ( @@ -22,10 +22,10 @@ const BarrageDemo = () => {

基础用法

- +
-
diff --git a/src/packages/barrage/doc.md b/src/packages/barrage/doc.md index c7fef7d..fa0211f 100644 --- a/src/packages/barrage/doc.md +++ b/src/packages/barrage/doc.md @@ -17,20 +17,20 @@ import { Barrage } from '@nutui/nutui-react'; ```tsx

基础用法

- +
- +
``` ```tsx let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-'] -const danmuRef = useRef(null) -const addDanmu = () => { +const barrageRef = useRef(null) +const addBarrage = () => { let n = Math.random() - if (danmuRef.current) { - danmuRef.current.add('随机——' + String(n).substr(2, 10)) + if (barrageRef.current) { + barrageRef.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 | -- GitLab