面包屑封装

最新推荐文章于 2024-07-22 08:55:10 发布

翻斗花园vue战士

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量58

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_54588073/article/details/130422767

版权

封装：

<template>
  <div class="breadcrumb-ipcrl" :style="{ background: specialBackground }">
    <div class="layout-content">
      <span class="tip-font">当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item @click.native="openPreRouter">{{
          firstBreadCrumb.meta.title
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ nowRouter.query.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nowRouter: {
      type: Object,
      default() {
        return {};
      },
    },
    lastRouter: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isShowHomePage: false,
      firstBreadCrumb: {},
      specialBackground: "unset",
    };
  },
  watch: {
    nowRouter: {
      handler(newVal, oldVal) {
        console.log("路由new：", newVal);
        this.specialBackground = "unset";
        if (newVal.name == "courseDetails") {
          this.specialBackground = "#fff";
        } else if (newVal.name == "szElementsDetails") {
        } else if (newVal.name == "szThemesDetails") {
        } else {
        }
      },
      immediate: true,
    },
    lastRouter: {
      handler(newVal) {
        console.log("上一次路由：", newVal);
        if (newVal.meta.title) {
          this.firstBreadCrumb = newVal;
        } else {
          this.firstBreadCrumb = {
            path: "/",
            meta: {
              title: "首页",
            },
          };
        }
      },
      immediate: true,
    },
  },
  methods: {
    openPreRouter() {
      this.$router.push({
        name: this.firstBreadCrumb.name,
        query: this.firstBreadCrumb.query || {},
        params: this.firstBreadCrumb.params || {},
      });
    },
  },
};
</script>
<style lang="scss">
.breadcrumb-ipcrl {
  padding: 15px 0;
  .tip-font {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
  }
  .el-breadcrumb {
    display: inline-block;
    vertical-align: top;
    .el-breadcrumb__item {
      cursor: pointer;
      .el-breadcrumb__inner,
      .el-breadcrumb__separator {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #666666;
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: #333333;
        }
      }
    }
  }
}
</style>

使用：

 <BreadCrumb
      :nowRouter="nowRouter"
      :lastRouter="lastRouter"
      v-if="isShowBreadCrumb"
    />

 data() {
    return {
      isShowBreadCrumb: false,
      nowRouter: {},
      lastRouter: {},
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.nowRouter = newVal;
        this.lastRouter = oldVal || {};
        if (
          ["courseDetails", "szElementsDetails", "szThemesDetails"].indexOf(
            newVal.name
          ) != -1
        ) {
          this.isShowBreadCrumb = true;
        } else {
          this.isShowBreadCrumb = false;
        }
        setTimeout(() => {
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
        }, 100);
      },
      immediate: true,
    },
  },