ruoyi-plus-uniapp

主题

Grid 宫格 ​

WD UI 宫格组件，用于展示网格列表，支持自定义列数和间距。

基本使用 ​

基础宫格 ​

vue
<template>
  <view class="demo-block">
    <wd-grid>
      <wd-grid-item 
        v-for="item in 8" 
        :key="item"
        @click="handleClick(item)"
      >
        <wd-icon name="home" size="32" />
        <text>菜单{{ item }}</text>
      </wd-grid-item>
    </wd-grid>
  </view>
</template>

<script setup>
const handleClick = (item) => {
  console.log(`点击了菜单${item}`)
}
</script>

自定义列数 ​

vue
<template>
  <view class="demo-block">
    <!-- 3列宫格 -->
    <wd-grid :column-num="3">
      <wd-grid-item v-for="item in 6" :key="item">
        <wd-icon name="star" size="32" />
        <text>菜单{{ item }}</text>
      </wd-grid-item>
    </wd-grid>
    
    <!-- 5列宫格 -->
    <wd-grid :column-num="5">
      <wd-grid-item v-for="item in 10" :key="item">
        <wd-icon name="heart" size="24" />
        <text>菜单{{ item }}</text>
      </wd-grid-item>
    </wd-grid>
  </view>
</template>

设置间距 ​

vue
<template>
  <view class="demo-block">
    <wd-grid :column-num="3" gutter="20">
      <wd-grid-item v-for="item in 6" :key="item">
        <view class="grid-content">
          <wd-icon name="add" size="32" />
          <text>菜单{{ item }}</text>
        </view>
      </wd-grid-item>
    </wd-grid>
  </view>
</template>

<style>
.grid-content {
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  text-align: center;
}
</style>

API ​

Grid Props ​

参数说明类型默认值
column-num列数number4
gutter间距string/number0
border是否显示边框booleantrue
square是否固定正方形格子booleanfalse

GridItem Props ​

参数说明类型默认值
text文本string—
icon图标string—
dot是否显示小红点booleanfalse
badge徽标内容string/number—

Events ​

事件名说明参数
click点击宫格时触发index: 索引