当前位置: 首页 > news >正文

ElementUI浅尝辄止29:Breadcrumb 面包屑

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

1.如何使用?

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

<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 设置失效

<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>

http://www.lryc.cn/news/158459.html

相关文章:

  • ABB MPRC086444-005数字输入模块
  • stable diffusion实践操作-常见lora模型介绍
  • kubeadm 安装k8s
  • 选择最适合您的Bug管理软件:市场比较与推荐
  • Spring MVC的常用注解及用法
  • HTTP和HTTPS的区别、 HTTPS运行原理
  • 统计封闭岛屿的数目
  • 【数据结构与算法系列4】长度最小的子数组
  • 问道管理:底部渐渐抬高 今年反弹时刻或已来临
  • 正规黄金代理的三大要素
  • Spine2D骨骼动画播放器 - 微信小程序版
  • 蓝天转债,双良转债上市价格预测
  • python-爬虫-xpath方法-批量爬取王者皮肤图片
  • go锁--读写锁
  • Unity中Shader的屏幕坐标
  • springboot MongoDB 主从 多数据源
  • 【100天精通Python】Day57:Python 数据分析_Pandas数据描述性统计,分组聚合,数据透视表和相关性分析
  • Unity 切换场景后场景变暗
  • RabbitMQ学习笔记
  • 【C# Programming】类、构造器、静态成员
  • 软件层面缓存基本概念与分类
  • 单片机有哪些分类?
  • 高阶数据结构-----三种平衡树的实现以及原理(未完成)
  • 北斗高精度组合导航终端
  • 低代码平台是否能替代电子表格?
  • qt多个信号如何关联一并处理
  • 【python爬虫】12.建立你的爬虫大军
  • 2023数学建模国赛C题思路--蔬菜类商品的自动定价与补货决策
  • vue2与vue3的使用区别
  • Apache httpd漏洞复现