Breadcrumb 面包屑

使用指南

用于显示两个层级及以上的路径关系，告知用户所在层级位置，并提供快捷返回向上层级的导航功能。

何时使用

• 当系统拥有超过两级以上的层级结构时；
• 当需要告知用户『你在哪里』时；
• 当需要向上导航的功能时。

规则

• 上级节点：可点击，点击后返回对应的层级；
• 当前节点：显示当前所在位置；
• 当路径长度超出容器，支持左右滑动查看；
• 当进入下一级节点，路径长度超出容器时，则自动定位至当前所在节点。

代码演示

查看代码

<template>
  <div class="list">
    <div style="height: 16px;"/>
    <h3-breadcrumb :params="items1" @touch="onTouch1"/>
    <div style="height: 16px;"/>
    <h3-breadcrumb :params="items2" @touch="onTouch1"/>
  </div>
</template>

<script>
import H3Breadcrumb from '@/components/h3-breadcrumb/';
export default {
  components: {
    H3Breadcrumb,
  },
  data() {
    return {
      isShowToast: false,
      toastContent: "",
      toast: this.$toast,
      items1 : [
        {
          name: "根节点",
          itemInfo: "/",
        },
        {
          name: "一级节点",
          itemInfo: "/one",
        },
         {
          name: "二级节点",
          itemInfo: "/two",
        }
      ],
      items2 : [
        {
          name: "根节点",
          itemInfo: "/",
        },
        {
          name: "一级节点",
          itemInfo: "/one",
        },
         {
          name: "二级节点",
          itemInfo: "/two",
        },
        {
          name: "三级节点",
          itemInfo: "/three",
        },{
          name: "四级节点",
          itemInfo: "/four",
        },{
          name: "五级节点",
          itemInfo: "/five",
        }
      ],
    }
  },
  methods: {
    onTouch1(event) {
      this.toast.show({text: JSON.stringify(event)});
    },
    onTouch2(event) {
      this.toast.show({text: JSON.stringify(event)});
    },
  }
};
</script>

API

Prop

属性	说明	类型	默认值
params	面包屑参数，数组类型，数组内的对象类型为 { name: string,itemInfo: any }, name用于面包屑菜单展示， itemInfo可选，用于扩展用户信息，整个对象会在touch事件中做为参数返回	Array	false

Event

事件名	说明	参数
touch	面包屑菜单触摸事件	{ name: string,itemInfo: any }, name用于面包屑菜单展示， itemInfo可选，用于扩展用户信息，整个对象会在touch事件中做为参数返回