使用

使用demo

container组件包含5个小组件，分别是：

• aside
• container
• footer
• header
• main

源码

源码位置

├── index.ts   // 组件入口
├── src
│   ├── aside.vue
│   ├── container.vue
│   ├── footer.vue
│   ├── header.vue
│   └── main.vue
└── style     // 样式
    ├── css.ts
    └── index.ts

aside.vue解读

<script lang="ts" setup>
const style = computed(
    () =>
        (props.width
            ? ns.cssVarBlock({ width: props.width }) // {--el-aside-width: <宽度>}
            : {}) as CSSProperties,
);
</script>

其他footer.vue | header.vue | main.vue 类似

container.vue解读

部分代码如下：

<template>
    <section
        :class="[
            ns.b(), // el-container
            ns.is('vertical', isVertical), // is-vertical
        ]">
        <slot />
    </section>
</template>

<script lang="ts" setup>
const slots = useSlots();

// 传了props.direction > slots中有一个组件是<el-header>或<el-footer>
const isVertical = computed(() => {
    if (slots && slots.default) {
        const vNodes: VNode[] = slots.default();
        return vNodes.some((vNode) => {
            const tag = (vNode.type as Component).name;
            return tag === 'ElHeader' || tag === 'ElFooter';
        });
    }
    return false;
});
</script>

知识点：插槽的获取useSlots()，接着获取默认插槽slots.default()，然后获取插槽内容组件的name属性vNode.type.name

注意点：这里只判断了第1层默认插槽，所以遇到加了个div包裹的情况就不行了，或者将插槽封装成demo.vue组件再引入也不行，比如下面

<el-container>
  <demo></deom>
</el-container>