vue封装一个动态配置跨行、跨列、间隙、水平划分宽度、默认行高的组件

好的，下面是一个简单的示例代码：

<template>
  <div class="grid-container" :style="{ gridTemplateColumns: columnWidths, gridGap: gap }">
    <slot />
  </div>
</template>

<script>
export default {
  name: "DynamicGrid",
  props: {
    columnWidths: {
      type: String,
      default: "repeat(auto-fill,minmax(100px,1fr))"
    },
    gap: {
      type: String,
      default: "10px"
    },
    rowHeight: {
      type: String,
      default: "auto"
    }
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-auto-rows: auto;
}
</style>

在该组件中，我们定义了三个 props：`columnWidths`、`gap` 和 `rowHeight`。其中，`columnWidths` 和 `gap` 分别控制了列宽和间距，`rowHeight` 则控制了默认行高。该组件默认采用自适应布局，即自动计算列数以填满容器宽度。如果需要手动指定列数，则可以修改 `columnWidths` 的值。

使用该组件时，可以在组件内部插入任意数量的子组件，并根据需要进行跨行、跨列操作，例如：

<DynamicGrid>
  <div style="grid-column: 1 / span 2; grid-row: 1 / span 2">跨行跨列</div>
  <div style="grid-column: 1 / span 1; grid-row: 3">跨行</div>
  <div style="grid-column: 2 / span 1; grid-row: 3">跨行</div>
  <div style="grid-column: 3 / span 2; grid-row: 1">跨列</div>
  <div style="grid-column: 3 / span 2; grid-row: 2">跨列</div>
  <div style="grid-column: 3 / span 2; grid-row: 3">普通元素</div>
</DynamicGrid>

在子组件中，可以通过 `grid-column` 和 `grid-row` 属性来控制元素的位置和大小。例如，`grid-column: 1 / span 2` 表示该元素从第一列开始，跨越两列。

希望这个示例对你有所帮助！