從零實現Vue的元件庫（五）- 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作為分隔符，方便其擴充。

往期文章：

原創宣告：該文章為原創文章，轉載請註明出處。

從零實現Vue的元件庫（五）- Breadcrumb 實現

1. 例項

2. 原理

3. 使用

4. 總結

相關文章