vue3利用渲染函数实现格子布局(九宫格)

本文介绍如何在Vue3中利用渲染函数创建一个九宫格布局组件。通过设置父组件和子组件,结合渲染函数过滤非子组件内容,实现约束布局。采用无序列表结构,利用CSS样式实现格子布局,支持设定列数、间距和正方形格子。在实际使用中,由于子组件宽度计算可能导致一行总宽度超出100%,作者提供了一种临时解决方案,并欢迎反馈问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

因为工作中需要用到类似九宫格的布局,而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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值