page-construct-template_component_barrage v1.0.3

弹幕组件

className: PropTypes.string, // 弹幕容器额外的class
way: PropTypes.oneOf(ways), // css3 ｜ canvas
data: PropTypes.array.isRequired, // 弹幕列表数据 {} | dom
lineHeight: PropTypes.number, // 单行弹幕高
speed: PropTypes.array, // 弹幕运动速度
fontSize: PropTypes.number, // 文字大小
fontFamily: PropTypes.string, // 字体
opacity: PropTypes.string, // 透明程度
color: PropTypes.string, // 颜色
barrageAway: PropTypes.number, // 前后两条弹幕初始距离
onClick: PropTypes.func, // 弹幕点击回调
onContextMenu: PropTypes.func, // 
onMouseOver: PropTypes.func, // 鼠标移到单条弹幕元素上的回调
onMouseOut: PropTypes.func // 鼠标移出单条弹幕元素的回调

import React, { useState } from 'react';
import Index from './index';

const defaultData = [
  {
      text: 'hello',
      color: 'orange',
      fontSize: 40
  },
  {
      text: 'hello',
      color: '#fff'
  }
];

export default () => {
  const [data, setData] = useState(defaultData);

  setInterval(() => {
    setData([...data, ...defaultData])
  }, 2000)

  return (
    <div
      style={{
        height: 400
      }}
    >
      <Index
        className="test"
        way="css3"
        data={data}
        fontSize={25}
        lineHeight={40}
        speed={[1, 2]}
        barrageAway={100}
        onMouseOver={({ event, stopAnimation }) => stopAnimation()}
        onMouseOut={({ event, reStartAnimation }) => reStartAnimation()}
      />
    </div>
  );
}