CocoClassHelpDocs/components/HomeSection/HomeSection.vue

<script setup lang="ts">
import { toRefs, computed, useSlots, h } from "vue";
const props = defineProps<{
  title?: string;
}>();
const { title } = toRefs(props);

const slots = useSlots();
const titleNode = computed(() => {
  return slots.title ? slots.title() : title.value ? h("h1", {}, title.value) : null;
});
</script>
<template>
  <div class="home-section">
    <component :is="titleNode" class="title" />
    <el-row class="content" justify="center" :gutter="20" tag="section" v-bind="$attrs">
      <slot></slot>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.home-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
}
.content {
  width: 100%;
}
.el-row {
  row-gap: 20px;
  align-items: stretch;
}
</style>