分页实现项目首页“快捷入口”

1.功能介绍：

如果项目菜单结构比较复杂且较多时，首页上可能会默认展示几个快捷入口。当用户点击后可以快速跳转至对应菜单。

动态进行配置，根据权限展示不同的快捷入口菜单。可自动分页，点击按钮进行切换下一页/上一页。

2.实现效果：

思路： 使用ElementUI中 Carousel 组件，每个carousel-item就是一页，每页需要展示几个入口，进行动态处理，然后利用双层循环进行渲染。

3.代码：

<!--
 * @Description: 快捷入口
 * @Author: zhangy
 * @Date: 2022-07-22 08:46:37
 * @LastEditors: zhangy
 * @LastEditTime: 2022-07-29 16:28:37
-->
<template>
  <div class="fast-menu" :style="{ backgroundColor: menuList.length ? '' : '#fff' }">
    <el-carousel v-if="menuList.length" :loop="false" :initial-index="0" indicator-position="none" :autoplay="false" height="100px">
      <el-carousel-item v-for="(item, index) in _GroupCout" :key="index" class="carousel">
        <div v-for="(c, index) in item" :key="index" class="menu-item" @click="jump(c.menuPath)">
          <div class="icon-img">
            <img :src="c.picUrl">
          </div>
          <div class="content">{{ c.entranceName }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-empty v-else :image-size="40" :description="'暂无入口'" />
  </div>
</template>

<script>
import fastMenuModule from '@/api/systemConfig/fastMenuManage'

export default {
  name: 'FastMenu',
  data() {
    return {
      menuList: []
    }
  },
  computed: {
    _GroupCout() {
      // 获取数据
      const objArray = this.menuList
      // 拿到数组的长度
      const len = objArray.length
      // 自定义每页显示多少个数据-假设每行显示5个
      const n = 5
      const lineNum = len % 5 === 0 ? len / 5 : Math.floor(len / 5 + 1)
      const res = []
      // 处理
      for (let i = 0; i < lineNum; i++) {
        const temp = objArray.slice(i * n, i * n + n)
        res.push(JSON.parse(JSON.stringify(temp)))
      }
      return res
    }
  },
  created() {
    this.getFastMenuList()
  },
  methods: {
    // 获取快捷菜单列表
    async getFastMenuList() {
      const { data } = await fastMenuModule.getFastMenuList()
      this.menuList = data.list
    },
    jump(path) {
      if (path) {
        this.$router.push({ path })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fast-menu {
  margin: 15px 0;

  .el-empty {
    padding: 10px 0;
  }
}
::v-deep .el-carousel {
  .carousel {
    display: flex !important;
  }
  .menu-item {
    margin-right: 1%;
    width: 20%;
    height: 100px;
    background-color: #fff;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    display: flex;
    align-items: center;
    justify-content: center;
    .icon-img {
      width: 66px;
      height: 66px;
      border-radius: 33px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .content {
      margin-left: 20px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      width: 50%;
    }
  }
}
</style>