vue+elementUI面包屑組件封裝方法詳解

更新時間：2022年04月12日 14:59:58 作者：麥兜:)

這篇文章主要為大家詳細(xì)介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+elementUI面包屑組件封裝的具體代碼，供大家參考，具體內(nèi)容如下

一.選擇用哪種樣式

二.在組件文件夾下創(chuàng)建組件

三.在Bread.vue復(fù)制如下代碼

<template>
? <!-- 面包屑 -->
? <div class="bread">
?<el-breadcrumb separator-class="el-icon-arrow-right">
?<el-breadcrumb-item v-for="(item, index) in fromFather" :key=index :to="{ path: '/' + item.path }">{{item.name}}</el-breadcrumb-item>

</el-breadcrumb>
</div>
</template>

<script>
export default {
? ?name: 'bread',
? ?props: ['fromFather']
}
</script>

<style lang="less">
.bread {
? ? background-color: #fff;
? ? width: 100%;
? ? height: 50px;
? ? padding: 0 16px;
? ? border: 1px #EFEFEF solid;
? ? box-sizing: border-box;
? ? box-shadow: 1px 2px 4px #BABABA;
? ? margin-bottom: 36px;
? ? .el-icon-arrow-right:before {
? ? ? ? color: #000;
? ? }
? ? .el-breadcrumb__item {
? ? ? ? font-size: 20px;
? ? ? ? line-height: 50px;
? ? }
? ? .el-breadcrumb__inner {
? ? ? ? cursor: pointer !important;
? ? }
}
</style>

四.在你需要的頁面上應(yīng)用

// html代碼
<!-- 面包屑導(dǎo)航 -->
? <Bread :fromFather="dataPath"></Bread>

// js代碼
import Bread from '../../../components/Bread.vue' ?// 引入面包屑組件

export default {
? name: 'nicklist',
? components: {
? ? Bread // 注冊面包屑組件
? },
? data() {
? ? return {
? ? ? dataPath: [
? ? ? ? {
? ? ? ? ? name: '課程', ? // 名稱,自定
? ? ? ? ? path: 'nicklist' ?// 路由導(dǎo)航,自定
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: '課程管理',
? ? ? ? ? path: 'nicklist'
? ? ? ? }
? ? ? ] // 面包屑數(shù)據(jù)
? ? }
? }
}

效果如圖: