Element Breadcrumb 面包屑的使用方法


Posted in Javascript onJuly 26, 2020

组件— 面包屑

什么是面包屑导航

一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航。例如:

Element Breadcrumb 面包屑的使用方法

上面这个图表示我们当前的页面是Breadcrumb面包屑,上一级目录是组件页面,再上一级目录是Element UI页面。当我们点击这些目录时会返回到对应的页面中去。再例如:

Element Breadcrumb 面包屑的使用方法

上面这个图表示我们当前所在的位置是活动详情页面,上一级目录是活动列表页面…以此类推。
这些就是面包屑导航。

基础用法

Element Breadcrumb 面包屑的使用方法

<el-breadcrumb separator="/">
 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
 <el-breadcrumb-item><a href="/" rel="external nofollow" >活动管理</a></el-breadcrumb-item>
 <el-breadcrumb-item>活动列表</el-breadcrumb-item>
 <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

图标分隔符

Element Breadcrumb 面包屑的使用方法

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

Breadcrumb Attributes

Element Breadcrumb 面包屑的使用方法

Breadcrumb Item Attributes

Element Breadcrumb 面包屑的使用方法

到此这篇关于Element Breadcrumb 面包屑的使用方法的文章就介绍到这了,更多相关Element Breadcrumb 面包屑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php工具型代码之印章抠图
2018/07/18 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python input函数使用实例解析
2019/11/22 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
基于python实现对文件进行切分行
2020/04/26 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
商场中秋节活动方案
2014/02/07 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
区级文明单位申报材料
2014/05/15 职场文书
优秀班主任材料
2014/12/16 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
停车场管理制度范本
2015/08/05 职场文书
信息技术课教学反思
2016/02/23 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB