antd 好像有差不多功能的插件 , 但要求使用arco , arco上面的例子就很,,, 或者说根本就没有 不如自己写 ,高度自定义 更加方便 , 有时候看别人的文档真的挺折磨的
vue跟react都差不多 , 主要触发 和 跳转 ,触发写的是函数触发 一眼看懂 , 跳转也是简单函数 ,上代码
import { Tabs, Typography } from "@arco-design/web-react"const LiveTextFlow = ({ flowArr }) => {// 定义跳转到的位置const jumpToAnchor = (anchorId) => {const anchorElement = document.getElementById(anchorId);if (anchorElement) {anchorElement.scrollIntoView({ behavior: 'smooth' });}};const tabsChange = (tabs) => {console.log("tabs", tabs)if (tabs == 3) {jumpToAnchor('section2')} else {jumpToAnchor('section1')}}return (<div className="scroll-y h-[70%]"><Tabs defaultActiveTab='1' onChange={(key) => tabsChange(key)}><Tabs.TabPane key='1' title='Tab 1'></Tabs.TabPane><Tabs.TabPane key='2' title='Tab 2' disabled></Tabs.TabPane><Tabs.TabPane key='3' title='Tab 3'></Tabs.TabPane></Tabs><div className="h-full" style={{ overflowY: 'auto' ,border:'1px solid red' }}><div id="section1" className=""><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph></div><div id="section2"><Typography.Paragraph>@@@@@@@@@@@@@</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph></div></div></div>)
}export default LiveTextFlow;