Vue3 第三十三篇：常用组件：面包屑

最新推荐文章于 2024-03-07 14:14:43 发布

文子阳

最新推荐文章于 2024-03-07 14:14:43 发布

阅读量600

点赞数

分类专栏： Vue3 文章标签： vue.js elementui javascript JSX

本文链接：https://blog.csdn.net/wenxingchen/article/details/125523740

版权

Vue3 专栏收录该内容

42 篇文章 13 订阅

订阅专栏

JSX:

import style from './breadcrumb.module.css'
const Breadcrumb=()=>{
    
    return(
        <>
        <div className={style.navRightBre} onDblclick="" onContextmenu="" draggable={true} onDragstart="" onDragend="">
					<el-breadcrumb separator-class="el-icon-arrow-right" onDblclick="">
						<el-breadcrumb-item>
                            <el-icon onClick=""><Menu /></el-icon>
						</el-breadcrumb-item>
						<BreadcrumbItem></BreadcrumbItem>
					</el-breadcrumb>
				</div>
        </>
    )
}

const BreadcrumbItem=()=>{
    const breMenuList=[
        {
            id:1,
            name:'日志管理'
        },
        {
            id:2,
            name:'日志新增'
        }
    ]
    return(
        <>
        {
            breMenuList.map(x=>{
                return <el-breadcrumb-item key={x.id}>{x.name}</el-breadcrumb-item>
            })
        }
        </>
    )
}

export default Breadcrumb

CSS:

.navRightBre{height: 35px; position: relative; z-index: 110; box-shadow: 0 2px 2px #CCC;}
.navRightBre{line-height: 35px; padding-left: 1em; background-color: #FFF; cursor: pointer;}