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>
相关推荐
xiaogg367817 小时前
系统网站首页三种常见布局vue+elementui
前端·vue.js·elementui
xiaogg36782 天前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
我的心巴4 天前
vue-print-nb 打印相关问题
前端·vue.js·elementui
Amy_cx4 天前
在表单输入框按回车页面刷新的问题
前端·elementui
xiaogg36785 天前
网站首页菜单顶部下拉上下布局以及可关闭标签页实现vue+elementui
javascript·vue.js·elementui
白云~️5 天前
table表格合并,循环渲染样式
javascript·vue.js·elementui
夏之小星星6 天前
解决el-select选择框右侧下拉箭头遮挡文字问题
前端·vue.js·elementui
xiaogg36786 天前
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
前端·vue.js·elementui
Luffe船长6 天前
elementUI点击浏览table所选行数据查看文档
javascript·elementui·vue
入行IT两年半6 天前
element-plus 单选组件 el-radio,选不上,又没报错,直接复制官网也不行解决方案
前端·vue.js·elementui