vue3+ts造个面包屑吃?

前言

当项目中不使用第三方组件库时,我们需要自己造,今天就来造个面包屑吃吧!

首先看下Element Plus 官网的面包屑

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>

准备工作

首先在components文件下新建SyBread文件创建SyBread.vue 和 SyBreadItem.vue

注册全局插件

1. 在components文件下新建index.ts
2. 把SyBread 和SyBreadItem注册为全局插件

import {App} from 'vue'
import SyBread from './SyBread/SyBread.vue'
import SyBreadItem from './SyBread/SyBreadItem.vue'
export default {
  install(app:App){
    app.component('SyBread',SyBread)
    app.component('SyBreadItem',SyBreadItem)
  }
}

3. 在mian.ts导入使用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Sybread from './components' // 导入注册为插件
createApp(App).use(Sybread).mount('#app')

使用

在App.vue使用

<script setup lang="ts">
</script>

<template>
 <!-- * -->
  <XtxBread separator="*">
    <SyBreadItem to="/">首页</SyBreadItem>
    <SyBreadItem >手机</SyBreadItem>
    <SyBreadItem >电脑</SyBreadItem>
   </XtxBread>
<!-- > -->

 <SyBread separator=">">
    <SyBreadItem to="/">首页</SyBreadIte>
    <SyBreadIte >手机</SyBreadIte>
    <SyBreadIte>电脑</SyBreadIte>
    <SyBreadIte >化妆品</SyBreadIte>
    <SyBreadIte >服饰</SyBreadIte>
   </SyBread>
</template>

<style scoped>

</style>

看看效果是不是nice

SyBread.vue 和 SyBreadItem.vue代码

SyBread.vue

<script lang="ts" setup name="SyBread">
// 分隔符数据是位于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>

SyBreadItem.vue

<script lang="ts" setup name="SyBreadItem">
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>

感谢阅读^_^