菜单组件

<script setup>
import {reactive, ref} from 'vue'
/* count 每行显示几个  arr:元素数组*/
let config1 = reactive(
    {
      count: 4,
      isshowbage:true,
      arr: [{
        "name": "测试1",
        "id": "0",
        badage:6,
      }, {
        "name": "测试2",
        "id": "1",
        badage:0,
      }, {
        "name": "测试3",
        "id": "2",
        badage:0,
      }, {
        "name": "测试4",
        "id": "3",
        badage:0,
      }, {
        "name": "测试5",
        "id": "4",
        badage:0,
      },]

    }
)
let a = (100 / config1.count) + "vw";
let countvw = ref(a)

let appclick = (item) => {
  alert(item.name)
}
</script>

<template>
  <div class="maindv">
    <div class="itemdv" v-for="(item,index) in config1.arr" :key="index" @click="appclick(item)">
      <div class="jb" v-show="item.badage!=0?config1.isshowbage:false">{{item.badage}}</div>
      <div><img style="height: 40px;width: 40px;display: block" src="../assets/gn.png"/></div>
      <div>{{ item.name }}</div>
    </div>
  </div>
</template>

<style scoped>
.maindv {
  display: flex;
  flex-direction: row;
  width: 100vw;
  overflow-x: hidden;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.itemdv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-shink: 0;
  width: v-bind(countvw);
  margin-top: 10px
}

.jb {
  position: absolute;
  top: 0;
  right: 15px;
  background-color: red;
  border-radius: 50%;
  line-height: 15px;
  min-width: 18px;
  color: white;
  font-size: 13px;
  padding: 3px;
  text-align: center
}
</style>