安装

  npm install @ylzcc/container or
  yarn add @ylzcc/container

使用

  import { Container, Tab } from '@ylzcc/container'

  const App = () => {
    
    // 组件的props
    const [docProps, setdocProps] = useState({
        abc: 12
    })

    // 同时要监听组件的props变化，如果变化要重新改变tabs，组件的props才会改变
    useEffect(() => {
        setTabs([
            {
                id: '1',
                title: 'Doc',
                icon: docsvg,
                component: Doc,
                props: docProps
            }
        ])
    }, [docProps])

    // 所有标签
    const [tabs, setTabs] = useState<Tab[]>([
        {
            id: '1',
            title: 'Doc',
            icon: docsvg,
            component: Doc,
            menu: [
                {
                    title: '打印',
                    callback: () => {
                        console.log(12)
                    }
                }
            ],
            props: docProps
        },
        {
            id: '2',
            title: 'MonacoEditor',
            icon: docsvg,
            component: MonacoEditor,
        }
    ])

    //more
    const addMore = () => {
        setTabs([
            ...tabs,
            {
                id: '5',
                title: '新标签页',
                component: More,
            }
        ])
        setCurrent('5')
    }

    // 当前标签
    const [current, setCurrent] = useState('1')
    
    // 关闭标签
    const closeTab = (id: string) => {
        const newTabs = tabs.filter(item => {
            return item?.id !== id
        })
        if (id === current) {
            newTabs.length ? setCurrent(newTabs[0].id as string) : setCurrent("")
        }
        setTabs(newTabs)
    }
    
    // 关闭其他标签页
    const closeOtherTabs = () => {
        const newTabs = tabs.filter(item => {
            return item.id === current
        })
        setTabs(newTabs)
    }

    // 选择标签页
    const changeCurrent = (id: string) => { 
        setCurrent(id)
    }

    return (
      <div className='layout-content-show'>
          <Container tabs={tabs} current={current} closeTab={closeTab} closeOtherTabs={closeOtherTabs} changeCurrent={changeCurrent} addMore={addMore} />
      </div>
    )
  }