Grid 宫格

使用指南

在水平和垂直方向，将布局划分为若干等大的区块。

代码演示

查看代码

<template>
  <div class="list">
    <p>默认3列</p>
    <h3-grid>
      <h3-grid-item title="标题文字最多最多最多最多" subInfo="辅助文字" @click="handleGridItemClick">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字" subInfo="辅助文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字" subInfo="辅助文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
    </h3-grid>

    <p>自定义列数(5列)</p>
    <h3-grid :columnNum="5">
      <h3-grid-item title="标题文字最多最多最多最多">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
    </h3-grid>

    <p>自定义边距(8px)</p>
    <h3-grid :gutter="8">
      <h3-grid-item title="标题文字最多最多最多最多">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
    </h3-grid>

    <p>自定义右侧按钮</p>
    <h3-grid>
      <h3-grid-item title="标题文字最多最多最多最多">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
        <template #extra>
          <h3-icon type="IconFieldRadioStroke" />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
      <h3-grid-item title="标题文字">
        <template #icon>
          <h3-image
            :width="44"
            :height="44"
            :radius="8"
            :src="avatar"
          />
        </template>
      </h3-grid-item>
    </h3-grid>
  </div>
</template>

<script>
import { H3Grid, H3GridItem } from '@/components/h3-grid';
import H3Image from '@/components/h3-image';
import H3Icon from '@/components/h3-icon';

export default {
  name: 'Grid',
  components: {
    H3Grid,
    H3GridItem,
    H3Image,
    H3Icon,
  },
  data () {
    return {
      avatar:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg',
    };
  },
  methods: {
    handleGridItemClick () {
      console.log('grid item click');
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 16px;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop - H3Grid

属性	说明	类型	默认值
gutter	格子之间的间距，默认单位为px	number | string	-
columnNum	列数	number | string	3

Prop - H3GridItem

属性	说明	类型	默认值
title	标题	string	-
subInfo	二级文字	string	-

Events - H3GridItem

事件名	说明	参数
click	点击触发事件	-

Slots - H3GridItem

参数	说明
default	宫格内容自定义插槽
icon	图标插槽
extra	宫格右侧操作区域插槽