Breadcrumb 實現

顯示當前頁面的路徑，快速返回以前的任意頁面。

該組件的痛點在於：

• 採用vnode設定擴展性較好的分隔符；
• 利用vue-router高亮已選中的路徑。

---

1. 實例

代碼

<!-- 基礎用法 -->
<fat-breadcrumb separator="/" :paths="[ {name: '首頁', to: '/'}, {name: '麪包屑', to: '/Breadcrumb'}, {name: '標籤頁', to: '/Tabs'} ]" />

<!-- vnode分隔符 -->
/*
const _h = this.$createElement;
const separatorComponent = _h("fat-icon", {
    props: {
        name: "keyboard_arrow_right"
    }
});
*/
<fat-breadcrumb :separator-component="separatorComponent" :paths="[ { name: '首頁', to: '/' }, { name: '麪包屑', to: '/Breadcrumb' }, { name: '標籤頁', to: '/Tabs' } ]" />
複製代碼

實例地址：Breadcrumb 實例

代碼地址：Github UI-Library

2. 原理

因爲分隔符要採用vnode的形式，因此該組件採用函數式來實現。其基本結構以下

export default {
    functional: true,
    props: {
        paths: {
            type: Array,
            default: () => []
        },
        // String分隔符
        separator: {
            type: String,
            default: '/'
        },
        // Vnode分隔符
        separatorComponent: {
            type: Object
        }
    },
    render: function (_h, context) {
        ...
    }
}
複製代碼

定義props中包含路徑、分隔符，而後render function的實現爲，

render: function (_h, context) {
    const {
        props: {
            paths,
            separator,
            separatorComponent
        }
    } = context
    // 遍歷paths生成對應的child elements
    let elements = paths.map(path => {
        const {
            label,
            to
        } = path
        // 若是路徑to存在，則利用router-link component
        const element = to ? 'router-link' : 'span'
        const props = to ? {
            to
        } : {}
        // return element vnode
        return _h(element, {
            'class': {
                'breadcrumb-item': true
            },
            props
        }, label)
    })

    return _h('div', {
        'class': {
            'breadcrumb': true
        }
    }, elements)
}
複製代碼

利用vue-router的active-class，exact-active-class，來實現，遊覽過的路徑高亮：

• active-class：連接激活時使用的 CSS 類名;
• exact-active-class：連接被精確匹配的時候激活的 CSS 類名。

3. 使用

使用時，主要注意點是separatorComponent組件分隔符的構建，提供一種相對合理的方法，在Breadcrumb的父組件data中，完成vnode的建立工做。

data() {
    const _h = this.$createElement;

    return {
        separatorComponent: _h("fat-icon", {
            props: {
                name: "keyboard_arrow_right"
            }
        })
    }
}
複製代碼

PS：此時data不能爲箭頭函數。

4. 總結

封裝一個Breadcrumb組件，將vnode做爲分隔符，方便其拓展。

原創聲明： 該文章爲原創文章，轉載請註明出處。