【Vue3】面包屑组件封装

面包屑组件封装

目标：掌握面包屑组件如何使用

核心代码

src/components/bread/index.vue

<script lang="ts" setup name="Bread">
// 分隔符数据是位于Bread组件中 而对于分隔符数据的使用是在底层的组件中使用
// provide/inject
import { provide } from 'vue'

const props = defineProps({
  separator: {
    type: String,
    default: '',
  },
})

// 为底层组件提供数据
provide('separator', props.separator)
</script>
<template>
  <div class="bread">
    <slot />
  </div>
</template>
<style scoped lang="less">
.bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
src/components/bread/item.vue

<script lang="ts" setup name="BreadItem">
import { inject } from 'vue'

defineProps({
  to: {
    type: String,
  },
})

const separator = inject('separator')
</script>
<template>
  <div class="bread-item">
    <!--
      如果to存在 有值 我们就渲染一个router-link标签
      如果to不存在  那就渲染一个span标签
    -->
    <router-link v-if="to" :to="to"><slot /></router-link>
    <span v-else><slot /></span>
    <!-- 分隔符 -->
    <i v-if="separator">{{ separator }}</i>
    <i v-else class="iconfont icon-angle-right"></i>
  </div>
</template>

<style lang="less" scoped>
.bread-item {
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>

（2）注册成全局组件应用

import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'

export default {
  install (app) {
    app.component('Bread', Bread)
    app.component('BreadItem', BreadItem)
  }
}

(3)提供类型声明

declare module 'vue' {
  export interface GlobalComponents {
    Skeleton: typeof Skeleton
    Carousel: typeof Carousel
    More: typeof More
    Bread: typeof Bread
    BreadItem: typeof BreadItem
  }
}

（4）使用范例：

<Bread>
  <BreadItem to="/">首页</BreadItem>
  <BreadItem>美食</BreadItem>
</Bread>