element-ui面包屑实现显示隐藏功能,而不是跳转链接

最近项目开发中有遇到一个需求,页面要实现面包屑的效果,但是实际上并不需要跳转链接,所以对面包屑做了一些修改。

效果如下图所示:

 页面标签代码:

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值