Vue3 第三十二篇：常用组件：Tab栏

JSX:

import style from './towards.module.css'

const Towards=()=>{
    
    return(
        <>
            <div id='navRight2' className={style.navRight2}>
                <div className={style.towardsLeft} title="向左滑">
                    <el-icon><ArrowLeft /></el-icon>
                </div>

                <div className={style.towardsMiddle}>
                    <div className={style.tabTitleBox}>
                        <Tabs></Tabs>
                    </div>
                </div>
                
                <div className={style.towardsRight}title="向右滑">
                    <el-icon><ArrowRight /></el-icon>
                </div>
            </div>
        </>
    )
}

const Tabs=()=>{
    let tabList = [
        {
            id: 1,
            name: '首页'
        },
        {
            id: 2,
            name: 'Socket'
        }
    ]

    let is_drag = false	// 当前是否正在拖拽 
    let dragTab = null		// 当前正在拖拽的tab 

    return(
        <>  
            {
                tabList.map(x=>{
                    return(
                        <>
                        <div key={x.id} id={'tab-' + x.id } className={style.tabTitle} draggable={true} onDragstart={[is_drag = true, dragTab = x]} onDragend={is_drag = false}>
                            <div className={style.tabTitle2}>
                                <span>{x.name}</span>
                                <el-icon><Close /></el-icon>
                            </div>
                        </div>
                        </>
                    )
                })
            }
        </>
    )
}

export default Towards

CSS

/* 第二行建筑物 */
.navRight2,.nav-right-bre{height: 35px; position: relative; z-index: 110; box-shadow: 0 2px 2px #CCC;}
.navRight2>div{height: 100%; position: absolute;}

.nav-right-bre{line-height: 35px; padding-left: 1em; background-color: #FFF; cursor: pointer; display: none;}
.nav-right-bre .el-breadcrumb__item{line-height: 35px; font-size: 13px; }
/* .nav-right-bre .el-breadcrumb__item:hover{cursor: pointer; text-decoration: underline;} */

.navRight2 .towardsLeft,.navRight2 .towardsRight{width: 24px; text-align: center; background-color: #FFF; cursor: pointer; line-height: 35px;} 
.navRight2 .towardsLeft{border-right: 1px #eee solid;}
.navRight2 .towardsRight{border-left: 1px #eee solid; right: 0px;}
.navRight2 .towardsLeft:hover i,.navRight2 .towardsRight:hover i{font-size: 1.1em;font-weight: bold;}

.navRight2 .towardsMiddle{width: 10000px; overflow: auto;/* calc(100% - 50px) */ left: 25px;background-color: #EEE;}
.navRight2 .tabTitleBox{display: inline-block; position: absolute; left: 0px; transition: all 0.2s;}
.navRight2 .tabTitle{font-size: 13px; cursor: pointer; float: left; transition: all 0.15s;white-space: nowrap;overflow: hidden;text-decoration: none; color: #333;}
.navRight2 .tabTitle2{padding: 0px 10px; height: 35px; margin-right: 1px; background-color: #FFF; line-height: 35px; }
.navRight2 .tabTitle2{transition: padding 0.1s, margin 0.1s;}
.navRight2 .tabTitle2 *{transition: all 0.0s;}
/* .tabTitle .el-icon-caret-right{color: #EEE; font-size: 1.7em; position: relative; top: 4px;} */
.navRight2 .tabTitle .el-icon-close{display: inline-block; border-radius: 50%; padding: 1px; color: #ccc; margin-left: -4px;}
.navRight2 .tabTitle .el-icon-close:hover{background-color: red; color: #FFF;}
.navRight2 .tabTitle span{display: inline-block; margin-left: 10px; margin-right: 10px;}
.navRight2 .tabTitle:hover span,.navRight2 .tab-native span{font-weight: bold;}