Grid 宫格导航

一、概述

定义

每个入口往往是独立的业务，用户进入一个入口后，只处理与此入口相关的内容，如果要跳转至其他入口，必须要先回到入口的总界面。

使用场景

• 为其他独立业务提供入口

交互说明

• 一般导航展示两行，超过两行时使用走马灯进行切换。

• 在大屏，当一行展示不全时，使用左右切换展示。

二、小屏效果

<template>
  <div class="custom-grid-small-example">
    <se-grid :row="row" :col="col" @change="change">
      <se-grid-item v-for="item in 20" :key="item" label="标题文字"></se-grid-item>
    </se-grid>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        row: 2,
        col: 5
      }
    },
    methods: {
      change(current) {
        console.log(`当前显示第${current}页`)
      }
    }
  }
</script>
<style>
  .custom-grid-small-example {
    width: 400px;
    margin: 0 auto;
  }
</style>

三、大屏效果

<template>
  <div class="custom-grid-small-example">
    <se-grid :row="row" :col="col" large>
      <se-grid-item v-for="item in 20" :key="item" :label="`标题文字` + item"></se-grid-item>
    </se-grid>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        row: 1,
        col: 10
      }
    }
  }
</script>

四、 自定义 Grid-item 内容

<template>
  <div class="custom-grid-small-example">
    <se-grid :row="row" :col="col" large>
      <se-grid-item v-for="(item, index) in 20" :key="index">
        <div class="se-grid-item__wrap">
          <div class="se-grid-item__img"></div>
          <span class="se-grid-item__label">导航{{index}}</span>
        </div>
      </se-grid-item>
    </se-grid>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        row: 1,
        col: 10
      }
    }
  }
</script>

<style>
  .custom-grid-small-example .se-grid-item__img {
    border-radius: 0;
  }

  .custom-grid-small-example .se-grid-item {
    text-align: center;
  }

  .custom-grid-small-example .se-tag {
    margin-top: 20px;
  }
</style>

Grid Props

Grid Events

GridItem Props