vue面包屑组件的封装方法

vue中自己封装面包屑组件,供大家参考,具体内容如下

要实现效果

前言

很多电商类产品都需要实现面包屑导航,用来优化用户体验

一、初级面包屑封装组件

1.封装基础结构组件 Bread.vue

<template>

<div class='xtx-bread'>

<div class="xtx-bread-item">

<RouterLink to="/">首页</RouterLink>

</div>

<i class="iconfont icon-angle-right"></i>

<div class="xtx-bread-item">

<RouterLink to="/category/10000">二级级导航</RouterLink>

</div>

<i class="iconfont icon-angle-right"></i>

<div class="xtx-bread-item">

<span>三级导航</span>

</div>

</div>

</template>

<style scoped lang='less'>

.xtx-bread{

display: flex;

padding: 25px 10px;

&-item {

a {

color: #666;

transition: all .4s;

&:hover {

color: @xtxColor;

}

}

}

i {

font-size: 12px;

margin-left: 5px;

margin-right: 5px;

line-height: 22px;

}

}

</style>

2.定义 props 暴露 parentPath parentName 属性,默认插槽,动态渲染组件

<div class='xtx-bread'>

<div class="xtx-bread-item">

<RouterLink to="/">首页</RouterLink>

</div>

<i class="iconfont icon-angle-right"></i>

<template v-if="parentName">

<div class="xtx-bread-item" v-if="parentName">

<RouterLink v-if="parentPath" to="/category/10000">{{parentName}}</RouterLink>

<span v-else>{{parentName}}</span>

</div>

</template>

<i v-if="parentName" class="iconfont icon-angle-right"></i>

<div class="xtx-bread-item">

<span> <slot/> </span>

</div>

</div>

//用props接收数据

props: {

parentName: {

type: String,

default: ''

},

parentPath: {

type: String,

default: ''

}

}

3.注册组件,使用验证效果

import Bread from './Bread'

export default {

install (app) {

// Vue2中,参数是Vue构造函数

// Vue3中,参数是根组件的实例对象

// 配置一个全局组件

app.component(Bread.name, Bread)

}

}

4.使用组件

<Bread parentPath="/category/1005000" parentName="服饰">飞织系列</Bread>

<Bread parentName="服饰">飞织系列</Bread> //parentPath去掉后不能实现跳转

二、高级封装 无限极导航

参考element-ui的面包屑组件:

<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>

1.封装基础结构组件 BrendItem.vue

<template>

<div class="xtx-bread-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: 'XtxBreadItem',

props: {

to: {

type: [String, Object] //to的值即可以是字符串,也可以是对象

}

}

}

</script>

//使用时

<bread-item to="/xxx/id"></bread-item>

<bread-item :to='{path:"/xxx/id"}'></bread-item>

2.封装 Brend.vue

<template>

<div class='xtx-bread'>

<slot />

</div>

</template>

<script>

export default {

name: 'XtxBread'

}

</script>

<style scoped lang='less'>

.xtx-bread {

display: flex;

padding: 25px 10px;

:deep(&-item) {

a {

color: #666;

transition: all 0.4s;

&:hover {

color: @xtxColor;

}

}

}

:deep(i) {

font-size: 12px;

margin-left: 5px;

margin-right: 5px;

line-height: 22px;

}

}

</style>

3.注册

import BreadItem from './BreadItem'

import Bread from './Bread'

export default {

install (app) {

// Vue2中,参数是Vue构造函数

// Vue3中,参数是根组件的实例对象

// 配置一个全局组件

app.component(Bread.name,Bread)

app.component(BreadItem.name, BreadItem)

}

}

4.使用

// 面包屑

<Bread>

<BreadItem to="/">首页</XtxBreadItem>

<BreadItem to="/category/1005000">服饰</XtxBreadItem>

<BreadItem >飞织系列</XtxBreadItem>

</XtxBread>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue面包屑组件的封装方法 的全部内容, 来源链接: utcz.com/p/239751.html

回到顶部