element-ui提供的布局容器组件有el-container、el-header、el-aside、el-main、el-footer。我其实比较想吐槽这几个组件,他们本身只是布局性质的,对应实现就是一个div 加个class 再加上slot,真的有必要单独写个组件出来吗?暴露几个CSS类名就够了,而且非要写组件的话用functional component实现其实更合适。

比较有水平的是在el-container组件,根据子元素的情况给direction默认值

computed: {
    isVertical() {
        if (this.direction === 'vertical') {
            return true;
        } else if (this.direction === 'horizontal') {
            return false;
        }
        // props没指定direction,根据slot中的节点决定direction默认值
        return this.$slots && this.$slots.default
            ? this.$slots.default.some(vnode => {
                // 拿到组件的tag
                const tag = vnode.componentOptions && vnode.componentOptions.tag;
                return tag === 'el-header' || tag === 'el-footer';
            })
            : false;
    }
}

results matching ""

    No results matching ""