vue3

2023-11-15 19:45| 来源: 网络整理| 查看: 265

前言

面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式，我们一起来看看如何实现的吧~

一、为什么需要面包屑？

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。

看完上面的介绍，相信各位已经理解了面包屑组件的使用场景了。对的，没错，是用来记录我们点击了哪些页面，方便我们再返回之前某一个页面。

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二、初级封装 1. 实现思路准备页面结构和样式,需要用到字体图标在public目录下的index.html中引入cdn的字体图标资源将需要外部传入的值定义为自定义属性将外部写在标签内部的内容放置在默认插槽中 2. 代码演示

在src/components目录下新建bread-crumbs.vue文件，公用的组件放在这个目录下统一管理，文件名可自定义。

代码如下（示例）：

首页 {{parentName}} {{parentName}} export default { name: 'BreadCrumbs', props: { parentName: { type: String, default: '' }, parentPath: { type: String, default: '' } } } .bread-crumbs{ display: flex; padding: 25px 10px; &-item { a { text-decoration: none; color: #666; transition: all .4s; &:hover { color: #27ba9b; } } } i { font-size: 12px; font-style: normal; margin-left: 5px; margin-right: 5px; line-height: 22px; } }

在src/components目录下新建index.js文件，将封装好的全局组件进行注册

import BreadCrumbs from './bread-crumbs' export default { install (app) { app.component(BreadCrumbs.name, BreadCrumbs) } }

在main.js中注册为插件

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 导入并注册 import myUI from './components' createApp(App).use(store).use(router).use(myUI).mount('#app') 3. 使用

传入公共组件需要的值代码如下（示例）：

空调 export default { name: 'App', setup() { } } 4. 不足

只能满足基本需求，超过二级导航后就无法使用。

三、进阶封装 1. 实现思路参考elementUI面包屑组件代码首页活动管理活动列表活动详情将每一个导航封装为一个组件 2. 代码演示

在上一步封装的基础上继续改进代码

代码如下（示例）：在src/component目录下新建bread-crumbs-item组件，文件名可以自定义。

export default { name: 'BreadCurmbsItem', props: { to: { type: [String, Object] } } }

还是在src/components目录下的index.js中注册为全局组件

import BreadCrumbs from './bread-crumbs' import BreadCrumbsItem from './bread-crumbs-item' export default { install (app) { app.component(BreadCrumbs.name, BreadCrumbs) app.component(BreadCrumbsItem .name, BreadCrumbsItem ) } }

修改BreadCrumbs.vue中代码，将导航的每一项放置在默认插槽中

export default { name: 'BreadCrumbs' } .bread-crumbs { display: flex; padding: 25px 10px; :deep(&-item) { a { text-decoration: none; color: #666; transition: all 0.4s; &:hover { color: #27ba9b; } } } :deep(i) { font-style: normal; font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; } } 3. 使用

使用的时候，有多少个二级导航就使用几个BreadCrumbsItem 代码如下（示例）：

首页电器空调 export default { name: 'App', setup() { } } 4. 不足

在最后一个导航后面会有多余的一个>指示标识

在这里插入图片描述

四、高阶封装 1. 思路

终极版，使用render函数自己进行拼接创建。 createElement render render选项与h函数

指定组件显示的内容：new Vue({选项})

el 选项，通过一个选择器找到容器，容器内容就是组件内容 template 选项，组件内容作为组件内容 render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。 2. 代码演示

修改BreadCurmbsItem组件内的代码

export default { name: 'BreadCurmbsItem', props: { to: { type: [String, Object] } } }

修改BreadCrumbs.vue中的代码

代码示例(如下)：

import { h } from 'vue' export default { name: 'BreadCrumbs', render () { // 用法 // 1. template 标签去除，单文件组件 // 2. 返回值就是组件内容 // 3. vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来 // 4. h 第一个参数标签名字第二个参数标签属性对象第三个参数子节点 // 需求 // 1. 创建bread-crumbs父容器 // 2. 获取默认插槽内容 // 3. 去除bread-crumbs-item组件的i标签，因该由render函数来组织 // 4. 遍历插槽中的item，得到一个动态创建的节点，最后一个item不加i标签 // 5. 把动态创建的节点渲染再bread-crumbs标签中 const items = this.$slots.default() const dymanicItems = [] items.forEach((item, i) => { dymanicItems.push(item) if (i < (items.length - 1)) { dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' })) } }) return h('div', { class: 'bread-crumbs' }, dymanicItems) } } // 将scope属性去除，目的是为了样式穿透至item组件中 .bread-crumbs { display: flex; padding: 25px 10px; &-item { a { text-decoration: none; color: #666; transition: all .4s; &:hover { color: #27ba9b; } } } i { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; // 样式的方式，不合理 // &:last-child { // display: none; // } } } 3. 使用

这个方式封装后，让全局组件的复用性更强了，强烈推荐使用

首页电器空调遥控器 export default { name: 'App', setup() { } }

在这里插入图片描述

可以看到这样封装后，咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>指示标识也没有了。

五、使用jsx优化

可以将高阶写法中的功能代码使用jsx的方式进行重写，jsx写出来的代码更加的简洁明了。

export default { name: 'BreadCrumbs', render () { // vue2的render函数的形参是 h 函数 // vue3中h函数是导入的 // createElement(标签名称, 标签的属性, 标签的子元素) // console.dir(this.$slots.default()) // 获取XtxBread组件的所有的插槽里面填充组件实例 const items = this.$slots.default() const results = [] items.forEach((item, index) => { results.push(item) // 手动生成一个i图标，添加到面包屑项目的后面 if (index < items.length - 1) { results.push() } }) return {results} } } 总结

功能虽然很小，但是涵盖的知识点很多，以上代码均已在本地测试，各位小伙伴儿可以直接使用~觉得有用的话，记得点赞收藏哦

【本文地址】

vue3

vue3

今日新闻

推荐新闻