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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Python 错误和异常小结
2013/10/09 Python
Python中for循环详解
2014/01/17 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
详解Python绘图Turtle库
2019/10/12 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
农救科工作职责
2013/11/27 职场文书
护士岗位职责
2014/02/16 职场文书
信息工作经验交流材料
2014/05/28 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
英语读书笔记
2015/07/02 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
卫生主题班会
2015/08/14 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书