最近项目开发中有遇到一个需求,页面要实现面包屑的效果,但是实际上并不需要跳转链接,所以对面包屑做了一些修改。
效果如下图所示:
页面标签代码:
<el-breadcrumb ref="fileBreadcrumb" separator="/">
<el-breadcrumb-item v-for="(item, index) in showFilePath" :key="item.id">
<a href="javascript:void(0);" :title="item.label" @click="breadcrumbClick(index, showFilePath, true)">{{ item.label }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
<div v-if="notOffline" class="detailsDiv">
111
</div>
<div v-if="notOfflineUser" class="detailsDiv">
222
</div>
<div v-if="notOfflineDept" class="detailsDiv">
333
</div>
<div v-if="notOfflineNum" class="detailsDiv">
444
</div>
变量声明:
showFilePath: [ // 面包屑显示数组
{ id: 0, label: '111' },
{ id: 1, label: '222' },
{ id: 2, label: '333' },
{ id: 3, label: '444' }
],
notOffline: true, // XXX分析显示隐藏
notOfflineUser: false, // XXX显示隐藏
notOfflineDept: false, // XXX显示隐藏
notOfflineNum: false, // XXX显示隐藏
点击事件:
/**
* 面包屑点击方法(控制页面内容显示隐藏)
* @param index
* @param filePath
* @param breadcrumb
*/
breadcrumbClick: function(index, filePath, breadcrumb) {
if (filePath.length === index + 1 && breadcrumb) {
return // 路径的最后一个节点,点击无效
}
if (index === 0) {
this.notOffline = true
this.notOfflineUser = false
this.notOfflineDept = false
this.notOfflineNum = false
}
if (index === 1) {
this.notOffline = false
this.notOfflineUser = true
this.notOfflineDept = false
this.notOfflineNum = false
}
if (index === 2) {
this.notOffline = false
this.notOfflineUser = false
this.notOfflineDept = true
this.notOfflineNum = false
}
if (index === 3) {
this.notOffline = false
this.notOfflineUser = false
this.notOfflineDept = false
this.notOfflineNum = true
}
console.log('index', index)
console.log('breadcrumb', breadcrumb)
console.log('this.showFilePath', JSON.parse(JSON.stringify(this.showFilePath)))
},
css样式:
<style lang='scss' scoped>
>>>.el-breadcrumb__inner a{
color: #68a8d0 ;
}
</style>