【ElementPlus】2.Space 间距组件

发表于 更新于 分类于 ，

在 Element UI 中我们想给组件之间添加间隔，只能使用Divider 组件，它能在组件之间添加分割线。

:::: demo-wrapper no-padding ::: center hero ::: ::::

不过这样就需要添加一堆Divider组件，还是有点儿麻烦，一种更加简单的办法是使用Space组件。

我们可以在src/components文件夹下新建一个Space.vue组件，然后修改App.vue的代码。

@tab Space.vue

{4-10}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <el-slider v-model="size" style="width:50%" />
    <el-space :size="size">
      <el-link>链接一</el-link>
      <el-link>链接二</el-link>
      <el-link>链接三</el-link>
      <el-link>链接四</el-link>
      <el-link>链接五</el-link>
    </el-space>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        size: 50,
      };
    },
  };
</script>

@tab app.vue 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <Space />
  </div>
</template>

<script>
  import Space from "./components/Space.vue";

  export default {
    name: "App",
    components: {
      Space,
    },
  };
</script>

运行效果如下：

::: demo-wrapper no-padding 20250226145633 :::

拖动Slider后size会跟着变化，间隔也会发生变化。