vue3+TypeScript 简单撕个面包屑

为什么封装？

• 迎合es6模块化开发思想
• 注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可

首先在components下新建两个文件，代码：

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

const {separator=''} = defineProps<{
  separator?: string
}>()

// 为底层组件提供数据
provide('separator', separator)
</script>

<template>
  <div class="xtx-bread">
    <slot />
  </div>
</template>

<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: red;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

<script lang="ts" setup name="BreadItem">
import { inject } from 'vue'
defineProps<{
  to?: string
}>()

//  从祖先获取数据
const separator = inject('separator')
</script>

<template>
  <div class="xtx-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>
.xtx-bread-item {
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>

index.ts中引入注册全局

import {App} from 'vue'
//导入组件
import Bread from './Bread/Bread.vue'
import BreadItem from './Bread/BreadItem.vue'

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

使用

<script setup lang='ts'>
</script>
  
<template>
    <!-- 面包屑 -->
    <div>
        <!-- 主动设置separtor分隔符 -->
        <Bread separtor=">">
          <BreadItem to="/">去吃</BreadItem>
          <BreadItem to="/">去喝</BreadItem>
          <BreadItem to="">去唱歌</BreadItem>
        </Bread>
    </div>
</template>

<style lang='less' scoped>
   
</style>