目录一、为什么需要面包屑?二、初级封装1. 实现思路2. 代码演示3. 使用4. 不足三、进阶封装1. 实现思路2. 代码演示3. 使用4. 不足四、高阶封装1. 思路2. 代码演示
面包屑导航可以将浏览过的页面记录下来,方便很快速的跳转回某一个页面,本文介绍了几种自己封装面包屑组件的方式。
当网页进行了多次跳转后,用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置,终归网页是要展示给用户。用户来使用的话,没有面包屑导航的话,可能就对网页产生了抵触心理,使用面包屑导航将每次跳转的页面记录下来,可以很好解决这一问题。
public
目录下的index.html
中引入cdn的字体图标资源<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.CSS" rel="external nofollow" >
在src/components
目录下新建bread-crumbs.Vue
文件,公用的组件放在这个目录下统一管理,文件名可自定义。
代码如下(示例):
<template>
<div class='bread-crumbs'>
<div class="bread-crumbs-item">
<RouterLink to="/">首页</RouterLink>
</div>
<i class="iconfont icon-angle-right"></i>
<div v-if="parentName" class="bread-crumbs-item">
<RouterLink v-if="parentPath" :to="parentPath">{{parentName}}</RouterLink>
<span v-else>{{parentName}}</span>
</div>
<i v-if="parentName" class="iconfont icon-angle-right"></i>
<div class="bread-crumbs-item">
<span>
<slot/>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'BreadCrumbs',
props: {
parentName: {
type: String,
default: ''
},
parentPath: {
type: String,
default: ''
}
}
}
</script>
<style scoped lang='less'>
.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;
}
}
</style>
在src/components
目录下新建index.js
文件,将封装好的全局组件进行注册
import BreadCrumbs from './bread-crumbs'
export default {
install (app) {
app.component(BreadCrumbs.name, BreadCrumbs)
}
}
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')
传入公共组件需要的值 代码如下(示例):
<template>
<div class="home-banner">
<bread-crumbs parentPath="/xxx" parentName="电器">空调</bread-crumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
只能满足基本需求,超过二级导航后就无法使用。
elementUI
面包屑组件代码<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/" rel="external nofollow" >活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
在上一步封装的基础上继续改进代码
代码如下(示例): 在src/component
目录下新建bread-crumbs-item
组件,文件名可以自定义。
<template>
<div class="bread-crumbs-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
<i class="iconfont icon-angle-right"></i>
</div>
</template>
<script>
export default {
name: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>
还是在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
中代码,将导航的每一项放置在默认插槽中
<template>
<div class='bread-crumbs'>
<slot />
</div>
</template>
<script>
export default {
name: 'BreadCrumbs'
}
</script>
<style scoped lang='less'>
.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;
}
}
</style>
使用的时候,有多少个二级导航就使用几个BreadCrumbsItem
代码如下(示例):
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首页</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">电器</BreadCrumbsItem>
<BreadCrumbsItem >空调</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
在最后一个导航后面会有多余的一个>
指示标识
终极版,使用render函数自己进行拼接创建。 createElement renderrender选项与h函数
指定组件显示的内容:new Vue({选项})
<div>组件内容</div>
作为组件内容修改BreadCurmbsItem
组件内的代码
<template>
<div class="bread-crumbs-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
</div>
</template>
<script>
export default {
name: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>
修改BreadCrumbs.vue
中的代码
代码示例(如下):
<script>
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)
}
}
</script>
<style lang='less'>
// 将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;
// }
}
}
</style>
这个方式封装后,让全局组件的复用性更强了,强烈推荐使用
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首页</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">电器</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx/xx">空调</BreadCrumbsItem>
<BreadCrumbsItem >遥控器</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
可以看到这样封装后,咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>
指示标识也没有了。
到此这篇关于vue 面包屑导航组件封装的文章就介绍到这了,更多相关vue 面包屑导航内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue面包屑导航组件封装
本文链接: https://www.lsjlt.com/news/165209.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0