前言
因为工作中需要用到类似九宫格的布局,而element-plus里没有类似的组件,因此自己实现了一个格子布局的组件
思路
其实格子布局目前我更多的是在手机端使用,而目前手机端开发使用的是vant组件库,这个组件库本身就有九宫格布局组件,它大致是由一个父组件grid,若干子组件grid-item组成来实现,然后我的实现方式也是如此,一个父组件+若干子组件,利用渲染函数主要是可以过滤掉其他非子组件的内容,约束使用方式
实现
宫格布局核心在于限制每行的格子数量,实现方式有很多种,我这里使用的是无序列表,约束ul和li组件的宽度,然后ul添加overflow: hidden,li添加float: left来实现格子布局效果
目前支持的功能:
- 设定列数(最小1)
- 设定格子间距(这里的间距是同时控制格子四个方向的间距,如果需要的话其实可以分的更仔细,比如统一的内边距,纵向间隔,横向间隔等)
- 约束子组件高度等于宽度,也就是正方形格子
具体代码如下
父组件
因为我使用的是vue3,因此这里的实现也是用setup+render实现
<!-- 格子布局组件 -->
<script lang="ts">
import {
defineComponent, h, provide } from "vue";
export default defineComponent({
props: {
/** 间隔 */
gutter: {
type: Number, default: 10 },
/** 列数 */
column: {
type: Number, default: 3 },
/** 约束宽=高 */
isScale: {
type: Boolean, default: false },
},
setup(props, {
slots }) {
provide("isScale", props.isScale);
// 插槽列表
const slotList: any[] = (slots as any).default();
// 渲染列表
const renderList