element-ui element-plus 面包屑breadcrumb - 分析

父组件地址

version:element-plus 1.0.1-beta.0

<template>
  <div
    ref="breadcrumb"
    class="el-breadcrumb"
    aria-label="Breadcrumb"
    role="navigation"
  >
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, ref, onMounted } from 'vue'

interface IBreadcrumbProps {
  separator: string
  separatorClass: string
}

export default defineComponent({
  name: 'ElBreadcrumb',
  props: {
    separator: { // 分隔符
      type: String,
      default: '/',
    },
    separatorClass: { // 图标分隔符 class
      type: String,
      default: '',
    },
  },
  setup(props: IBreadcrumbProps) {
    const breadcrumb = ref(null)

    // 注入 breadcrumb-item
    provide('breadcrumb', props)

    onMounted(() => {
      const items = breadcrumb.value.querySelectorAll('.el-breadcrumb__item')
      if (items.length) {
        items[items.length - 1].setAttribute('aria-current', 'page')
      }
    })

    return {
      breadcrumb,
    }
  },
})
</script>

子组件地址

<template>
  <span class="el-breadcrumb__item">
    <span
      ref="link"
      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
      role="link"
    >
      <slot></slot>
    </span>
    <!-- 如果父组件传入 separatorClass 那么分隔符就使用传入的 一般是icon组件中的 也可以自定义类名实现-->
    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
    <!-- 没传入separatorClass 就使用传入的 separator（默认值‘/’） -->
    <span v-else class="el-breadcrumb__separator" role="presentation">{{ separator }}</span>
  </span>
</template>

<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue'

interface IBreadcrumbInject {
  separator: string
  separatorClass: string
}

interface IBreadcrumbItemProps {
  to: string | Record<string, unknown>
  replace: boolean
}

export default defineComponent({
  name: 'ElBreadcrumbItem',
  props: {
    to: {
      type: [String, Object], // 路由跳转对象，同 vue-router 的 to
      default: '',
    },
    replace: { // 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
      type: Boolean,
      default: false,
    },
  },
  setup(props: IBreadcrumbItemProps, ctx) {
    const link = ref(null)
    // 接收到的内容
    const parent: IBreadcrumbInject = inject('breadcrumb')

    onMounted(() => {
      link.value.setAttribute('role', 'link')
      link.value.addEventListener('click', () => {
        // 获取到挂载在 vue 上的 router
        const router = (ctx as any).$router
        if (!props.to || !router) return
        // 根据 replace 判断是否向 history 添加新记录
        props.replace ? router.replace(props.to) : router.push(props.to)
      })
    })

    return {
      link,
      separator: parent?.separator,
      separatorClass: parent?.separatorClass,
    }
  },
})
</script>