Space 内容间距

基础容器，可以给多个组件之间提供统一的间距。

基本用法

点击查看代码

<template>
  <s-space>
    <el-card v-for="i in 3" :key="i" style="width: 240px;" header="卡片名称" shadow="hover">
      <div>卡片内容</div>
    </el-card>
  </s-space>
</template>

<script>
  export default {}
</script>

对齐方式

点击查看代码

<template>
  <div>
    <el-descriptions :column="1" colon>
      <el-descriptions-item label="对齐方式">
        <el-radio-group v-model="spaceAlign">
          <el-radio v-for="item in spaceAlignOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-descriptions-item>
    </el-descriptions>

    <div style="padding: 10px;border: 1px solid #ebeef5;">
      <s-space :align="spaceAlign">
        <span>文本内容</span>
        <el-button>按钮</el-button>
        <el-card shadow="never">卡片内容</el-card>
      </s-space>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        spaceAlign: "center",

        spaceAlignOptions: [
          { value: "center", label: "center" },
          { value: "start", label: "start" },
          { value: "end", label: "end" }
        ]
      }
    }
  }
</script>

间距尺寸

点击查看代码

<template>
  <div>
    <el-descriptions :column="2" colon>
      <el-descriptions-item label="X轴间距">
        <el-slider v-model="spaceXSize" style="margin: 0 .5rem;width: 80%;" :min="8" :max="24" />
      </el-descriptions-item>
      <el-descriptions-item label="Y轴间距" :span="2">
        <el-slider v-model="spaceYSize" style="margin: 0 .5rem;width: 80%;" :min="8" :max="24" />
      </el-descriptions-item>
    </el-descriptions>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="example-sub-title">同时设置 X、Y 轴间距</div>
        <s-space :size="spaceXSize" wrap>
          <el-card v-for="i in 9" :key="i" shadow="never">卡片 {{ i }}</el-card>
        </s-space>
      </el-col>

      <el-col :span="12">
        <div class="example-sub-title">分别设置 X、Y 轴间距</div>
        <s-space :size="[spaceYSize, spaceXSize]" wrap>
          <el-card v-for="i in 9" :key="i" shadow="never">卡片 {{ i }}</el-card>
        </s-space>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        spaceXSize: 8,
        spaceYSize: 8
      }
    }
  }
</script>

纵向排列

点击查看代码

<template>
  <s-space vertical>
    <el-card v-for="i in 3" :key="i" shadow="never">卡片 {{ i }}</el-card>
  </s-space>
</template>

<script>
  export default {}
</script>

自动换行

点击查看代码

<template>
  <s-space style="width: 320px;" wrap>
    <el-card v-for="i in 5" :key="i" shadow="never">卡片 {{ i }}</el-card>
  </s-space>
</template>

<script>
  export default {}
</script>

子元素占比

点击查看代码

<template>
  <div>
    <s-space style="width: 32rem;" :itemStyle="{ border: '1px solid #dcdfe6' }" :flex="[0, 1, 0]" block>
      <div v-for="i in 3" :key="i" class="custom-space-item">Item{{ i }}</div>
    </s-space>

    <br />

    <s-space style="width: 32rem;" :itemStyle="{ border: '1px solid #dcdfe6' }" :flex="[0, 1, 0, 1, 0]" block>
      <div v-for="i in 5" :key="i" class="custom-space-item">Item{{ i }}</div>
    </s-space>
  </div>
</template>

<script>
  export default {}
</script>

<style scoped lang="less">
  .custom-space-item {
    padding: 10px;
    background: #f2f6fc;
  }
</style>

分隔符

点击查看代码

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <div class="example-sub-title">默认分隔符</div>
      <s-space spacer>
        <span v-for="i in 3" :key="i">Text {{ i }}</span>
      </s-space>
    </div>

    <div style="margin-bottom: 20px;">
      <div class="example-sub-title">字符分隔符</div>
      <s-space spacer="、">
        <span v-for="i in 3" :key="i">Text {{ i }}</span>
      </s-space>
    </div>

    <div style="margin-bottom: 20px;">
      <div class="example-sub-title">自定义分隔符</div>
      <s-space spacer>
        <template #spacer>
          <div style="height: 1em;border-left: 1px dashed #c0c4cc;"></div>
        </template>
        <span v-for="i in 3" :key="i">Text {{ i }}</span>
      </s-space>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

Props

Slots