ElementUI学习笔记

# 二.Container

# 组件目录

# element-plus
├── packages
│   ├── components
│   │  ├── container             # container组件
│   │  │ ├── src
│   │  │ │ ├── aside.vue
│   │  │ │ ├── container.vue
│   │  │ │ ├── footer.vue
│   │  │ │ ├── header.vue
│   │  │ │ └── main.vue
│   │  │ ├── style
│   │  │ │ ├── css.ts
│   │  │ │ └── index.ts
│   │  └── index.ts              # 组件注册的入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# container.vue

  • 简化后的代码
<template>
  <section class="el-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'

import type { Component, VNode } from 'vue'

export default defineComponent({
  name: 'ElContainer',
  props: {
    direction: {
      type: String,
      default: '',
    },
  },
  setup(props, { slots }) {
    const isVertical = computed(() => {
      if (props.direction === 'vertical') {
        return true
      } else if (props.direction === 'horizontal') {
        return false
      }
      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'
        })
      } else {
        return false
      }
    })
    return {
      isVertical,
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

最新代码 (opens new window)

大体流程

  • 1.通过入口文件将 row 组件注册到 vue 组件中
  • 2.用户使用 row 组件，添加各种 props 和方法
  • 3.row 组件内部接收 props
  • 4.监听 gutter 变化，传递给子组件
  • 5.监听 gutter 变化，生成样式对象
  • 6.通过返回一个 render 对象，渲染组件的标签和类以及样式和插槽

# aside.vue

<template>
  <aside class="el-aside" :style="style">
    <slot></slot>
  </aside>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'

import type { CSSProperties } from 'vue'

export default defineComponent({
  name: 'ElAside',
  props: {
    width: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    return {
      style: computed(() => {
        return props.width
          ? ({ '--el-aside-width': props.width } as CSSProperties)
          : {}
      }),
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

最新代码 (opens new window)

大体流程

  • 1.通过入口文件将 col 组件注册到 vue 组件中
  • 2.用户使用 col 组件，添加各种 props 和方法
  • 3.col 组件内部接收 props
  • 4.监听 gutter 变化，传递给子组件
  • 5.监听 gutter 变化，生成样式对象
  • 6.通过返回一个 render 对象，渲染组件的标签和类以及样式和插槽
<template>
  <footer class="el-footer" :style="style">
    <slot></slot>
  </footer>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'

import type { CSSProperties } from 'vue'

export default defineComponent({
  name: 'ElFooter',
  props: {
    height: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    return {
      style: computed(
        () =>
          (props.height
            ? {
                '--el-footer-height': props.height,
              }
            : {}) as CSSProperties
      ),
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最新代码 (opens new window)

大体流程

  • 1.通过入口文件将 col 组件注册到 vue 组件中
  • 2.用户使用 col 组件，添加各种 props 和方法
  • 3.col 组件内部接收 props
  • 4.监听 gutter 变化，传递给子组件
  • 5.监听 gutter 变化，生成样式对象
  • 6.通过返回一个 render 对象，渲染组件的标签和类以及样式和插槽

# header.vue

<template>
  <header class="el-header" :style="style">
    <slot></slot>
  </header>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'

import type { CSSProperties } from 'vue'

export default defineComponent({
  name: 'ElHeader',
  props: {
    height: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    return {
      style: computed(
        () =>
          (props.height
            ? {
                '--el-header-height': props.height,
              }
            : {}) as CSSProperties
      ),
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最新代码 (opens new window)

大体流程

  • 1.通过入口文件将 col 组件注册到 vue 组件中
  • 2.用户使用 col 组件，添加各种 props 和方法
  • 3.col 组件内部接收 props
  • 4.监听 gutter 变化，传递给子组件
  • 5.监听 gutter 变化，生成样式对象
  • 6.通过返回一个 render 对象，渲染组件的标签和类以及样式和插槽

# main.vue

<template>
  <main class="el-main">
    <slot></slot>
  </main>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ElMain',
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12

最新代码 (opens new window)

大体流程

  • 1.通过入口文件将 col 组件注册到 vue 组件中
  • 2.用户使用 col 组件，添加各种 props 和方法
  • 3.col 组件内部接收 props
  • 4.监听 gutter 变化，传递给子组件
  • 5.监听 gutter 变化，生成样式对象
  • 6.通过返回一个 render 对象，渲染组件的标签和类以及样式和插槽

← 三.Button →