Breadcrumb-Vue3

公共基础组件 面包屑组件 for Vue3

示例

<template>
  <div>
    <Breadcrumb :breadcrumbs="breadcrumbs" />
  </div>
</template>

<script>
import Breadcrumb from 'enn-breadcrumb-vue3';

export default {
  components: {
    Breadcrumb,
  },
  data() {
    return {
      breadcrumbs: [
        {
          name: 'test',
          label: 'test',
        },
      ],
    };
  },
}
</script>

API

Breadcrumb Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------- | -------------- | ---- | ------------------- | ----------------------------------------- | | breadcrumbs | Array | | [{ label: '首页' }] | 面包屑的数据 | | home | string\Boolean\Object\Array | | '/' | 首页跳转的 name，传 false 表示不需要 首页 | | useHistory | boolean | | false | 使用 history API 跳转首页的链接 |

Tips

• useHistory 主要用于微应用跳转至对应的首页
• home Object 和 Array 参数和 breadcrumbs 一样

breadcrumbs Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------- | -------- | ---- | ------ | --------------------------------- | | label | string | 是 | - | 面包屑项显示的文案 | | to | string | | - | 路由跳转对象，同 vue-router 的 to | | name | string | | - | 路由跳转 name | | href | string | | - | 使用 history 进行路由跳转 | | handler | Function | | - | 自定义点击事件的处理函数 | | query | Object | | - | 路由跳转的参数 |

Tips

• 其中 to 的优先级更高，设置了 to 之后将不读取 name 和 query。
• query 使用 this.$route.query 获取，或直接从 url 中的 search 获取。

配置函数

用于统一修改默认值，避免重复配置

| 事件名称 | 参数 | 说明 | | -------------------- | ----------------------- | ------------------------- | | setDefaultHome | home 参数的默认值 | 统一配置默认的 home | | setDefaultUseHistory | useHistory 参数的默认值 | 统一配置默认的 useHistory |

示例

query

<Breadcrumb
  :breadcrumbs="[
    {
      label: '列表',
      name: 'list'
    },
    {
      label: '详情',
      name: 'detail',
      query: { id: 10 }, // query 使用 this.$route.query 获取，或直接从 url 中的 search 获取。
    },
    {
      label: '编辑',
    }
  ]"
/>

不显示首页

<Breadcrumb :home="false" />

统一设置首页配置

• 一般放置于 main.js

import { setDefaultHome } from 'enn-breadcrumb';
setDefaultHome(false);

返回 PageHeader

<template>
  <div>
    <PageHeader :back="goBack" />
  </div>
</template>

<script>
import { PageHeader } from 'enn-breadcrumb';

export default {
  components: {
    PageHeader,
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

PageHeader Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------- | -------- | ---- | ------ | --------------------------------- | | back | [Object, Function, String] | 是 | - | 点击回调 | | title | String | 否 | 返回 | 显示文字 |

• 接受一个back回调，如果back是函数，直接调用
• 如果是字符串，且this上挂载了$router，将会把字符串作为router的name进行跳转
• 以上两条都不符合，则进行window的路由跳转，接受一个对象（包含name、herf、query参数）