enn-breadcrumb-vue3

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参数）