Grid组件

源码地址

Grid组件功能介绍

核心代码

// 设置 style
const style = computed(() => {
  return {
    display: "grid",
    gridGap: gridGap.value,
    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
  }
})

• gridGap: 设置行和列之间的间距 用于设置Grid组件的子组件(GridItem)之间的行列间距
• gridTemplateColumns: 设置网格中列布局

测试实例代码

<template>
  <div class="home">
    <Grid>
        <GridItem v-for="(item, index) in list" :index="index">
          <el-form-item class="red">{item}</el-form-item>
        </GridItem>
        <GridItem suffix>
          <div style="background: aqua;"> suffix</div>
        </GridItem>
      </Grid>
  </div>
</template>

<script setup lang="ts" name="home">
import GridItem from "@/components/Grid/components/GridItem.vue"
import Grid from "@/components/Grid/index.vue"

const list:string[] = ['1','2','3','4']
</script>

<style scoped lang="scss">
.red{
  height: 50px;
  background: red;
  border: 1px solid royalblue;
}
</style>

根据屏幕变化设置网格中列布局

// 监听屏幕变化
const resize = (e: UIEvent) => {
  let width = (e.target as Window).innerWidth
  switch (!!width) {
    case width < 768:
      breakPoint.value = "xs"
      break
    case width >= 768 && width < 992:
      breakPoint.value = "sm"
      break
    case width >= 992 && width < 1200:
      breakPoint.value = "md"
      break
    case width >= 1200 && width < 1920:
      breakPoint.value = "lg"
      break
    case width >= 1920:
      breakPoint.value = "xl"
      break
  }
}

1. 通过监听器监听到屏幕断点breakPoint变化 如何改变gridCols.value从而改变列模板

   props.cols = { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } 或者数值
   // 注入 cols
   const gridCols = computed(() => {
     if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols
     return props.cols
   })
   

默认效果图

屏幕变化后