封装grid布局

适用于非常简单的布局

<Grid row-num={10} col-num={1} gap={10}>
    <GridItem x={0} y={0} w={4} h={1}>
      <BarRow />
    </GridItem>
    <GridItem x={4} y={0} w={6} h={1}>
      <Bar />
    </GridItem>
</Grid>

row-num一行被分为多少格，col-num垂直多少格，gap间隔 x每一行开始的位置，y列开始的位置，w宽度h高度

// Grid
import { defineComponent } from "vue"

export default defineComponent({
  props: {
    inline: Boolean,
    rowNum: Number, // 行的个数
    colNum: Number, // 列的个数
    gap: {
      type: Number,
      default: 10
    },
    color: String
  },
  setup(props, { slots }) {
    const setRowsCols = (type: number) => {
      return `repeat(${type}, 1fr)`
    }
    const styles = {
      width: "100%",
      height: "100%",
      display: props.inline ? "inline-grid" : "grid",
      "grid-template-columns": setRowsCols(props.rowNum),
      "grid-template-rows": setRowsCols(props.colNum),
      gap: `${props.gap}px`
    }

    if (props.color) {
      styles["background-color"] = props.color
    }

    return () => (
      <div class="my-grid-layout" style={styles}>
        {slots.default?.()}
      </div>
    )
  }
})

// GridItem
import { defineComponent } from "vue"

export default defineComponent({
  props: {
    x: Number,
    y: Number,
    w: Number,
    h: Number,
    border: Boolean,
    color: String
  },
  setup(props, { slots }) {
    const rowStart = props.y + 1
    const rowEnd = rowStart + props.h
    const columnStart = props.x + 1
    const columnEnd = columnStart + props.w
    const styles = {
      "grid-area": `${rowStart} / ${columnStart} / ${rowEnd} / ${columnEnd}`,
      border: props.border ? "1px solid #ccc" : "none" // test
    }

    if (props.color) {
      styles["background-color"] = props.color
    }
    return () => (
      <div class="my-grid-layout-item" style={styles}>
        {slots.default?.()}
      </div>
    )
  }
})