Breadcrumb 面包屑

顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面。

基礎(chǔ)用法

適用廣泛的基礎(chǔ)用法。

你需要做的是將面包屑導(dǎo)航所包含的標(biāo)題名和路徑名以數(shù)組形式存放并綁定:breadcrumbData傳送。

具體如下：

<template><fl-Breadcrumb :breadcrumbData = "dataBase" @handleClick = "getPathAfterClick"></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首頁',path:'/',},{name:'活動(dòng)列表',path:'/list',},{name:'活動(dòng)詳情',path:'/more'},{name:'活動(dòng)分類',path:'/category'}]}},} </script>

圖標(biāo)分隔符

通過設(shè)置iconSplit屬性自定義你所想要的圖標(biāo)分隔符。

<template><fl-Breadcrumb :breadcrumbData = "dataBase" iconSplit = '>' @handleClick = "getPathAfterClick"></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首頁',path:'/',},{name:'活動(dòng)列表',path:'/list',},{name:'活動(dòng)詳情',path:'/more'},{name:'活動(dòng)分類',path:'/category'}]}},} </script>

不同的路由跳轉(zhuǎn)方式

你可以設(shè)置replacePath屬性使面包屑導(dǎo)航的所有跳轉(zhuǎn)都為replace方式。

默認(rèn)為push的路由跳轉(zhuǎn)，無需設(shè)置。

<template><fl-Breadcrumb :breadcrumbData = "dataBase" iconSplit = '>' @handleClick = "getPathAfterClick" replacePath></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首頁',path:'/',},{name:'活動(dòng)列表',path:'/list',},{name:'活動(dòng)詳情',path:'/more'},{name:'活動(dòng)分類',path:'/category'}]}},} </script>

Attributes

參數(shù)說明類型可選值默認(rèn)值

breadcrumbData	面包屑導(dǎo)航數(shù)據(jù)源	Array	——	——
iconSplit	圖標(biāo)分隔符	String	——	/
handleClick	跳轉(zhuǎn)后的回調(diào)函數(shù)，返回導(dǎo)航信息	event	——	——
replacePath	設(shè)置路由跳轉(zhuǎn)模式	Boolean	true / false	false

源碼：

<template><div><div class = "breadBox"><div class = "breadChild" v-for = "(item,index) in breadcrumbData" :key = "item.path"><span :style = "defaultStyle(index)" @click = "toggleRouter(index,item.path,item)">{{item.name}}</span><span class = "centerChose" v-if = "index !== breadcrumbData.length - 1"> {{$attrs.iconSplit ? $attrs.iconSplit : '/'}} </span></div></div></div> </template><script>export default {props: {breadcrumbData: {type: Array,default: []},},data() {return {activeLevel:1, //選中導(dǎo)航等級(jí)}},methods: {toggleRouter(index,path,data) { //解析跳轉(zhuǎn)URLvar baseURL = window.location.href.split('/')[0] + '//' + window.location.href.split('/')[2]this.activeLevel = index + 1;if(this.$attrs.replacePath == ''){console.log(1)window.history.replaceState(null,null,baseURL + path)}else{window.history.pushState(null,null,baseURL + path)}this.$emit('handleClick',data)}},computed: {defaultStyle() { //選中樣式return (index) =>{if(index < this.activeLevel){return 'font-weight:bold;cursor:pointer;'}}}},} </script><style scoped> .breadBox{display: flex; } .breadBox .breadChild{margin:0 2px;font-size:14px; } .breadBox .centerChose{margin:0 3px; } </style>

總結(jié)

以上是生活随笔為你收集整理的手写Vue个人组件库——fl-Breadcrumb的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。