Space 间距组件

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

:::: demo-wrapper no-padding
::: center
{ align=”center” }
:::
::::

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

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

::: code-tabs

@tab Space.vue

{4-10}

<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

<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

:::

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