ElementUI浅尝辄止29:Breadcrumb 面包屑

显示当前页面的路径,快速返回之前的任意页面。

1.如何使用?

el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/

javascript 复制代码
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

2.图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符,注意这将使 separator 设置失效

javascript 复制代码
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
相关推荐
EstherNi16 小时前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
卡梅德生物小喇叭20 小时前
卡梅德生物技术快报|基于 CHO 细胞的百日咳毒素中和抗体检测方法构建与验证
人工智能·经验分享·elementui·微信公众平台·facebook
蜡台1 天前
Vue2 elementui2 中 el-switch 实现先判断改变状态
前端·vue.js·elementui·el-switch
周不凢1 天前
elementui 表格行选择:通过 toggleRowSelection 方法控制表格行的选中状态
前端·javascript·elementui
小雨cc5566ru2 天前
基于Nodejs+vue+ElementUI的大学生课程排课管理系统设计
前端·vue.js·elementui
qq_8406122332 天前
Nodejs+vue+ElementUI框架的家政服务评价系统 保洁员预约系统的设计与实现
前端·vue.js·elementui
永恒毕设程序2 天前
基于ssm+vue基于elementui的工厂物料管理系统设计与实现【开题+程序+论文】
前端·vue.js·elementui
说给风听.2 天前
零基础吃透 ElementUI:Vue 开发者必备组件库手册
前端·vue.js·elementui
BillKu2 天前
Element Plus对话框样式设置指南
前端·vue.js·elementui
Q_Q5110082852 天前
vue+nodejs+ElementUi的仓库库存管理系统的设计与实现
前端·vue.js·elementui