我想显示几个元素在卡,来自我的路由系统,在一个类似的方式,我正在创建我的侧边栏(这是正常工作)。我得到了所有的标题和图标,链接是完美的工作。
这就是我正在做的:因为我的一些元素,我从我的路由系统得到的有孩子(例如,我有"agenda"、"sessao"和"packsemodulos"的点,并且最后一个元素在其内部有两个元素"packs"和"modulos")当我检查我的路由文件时,对于元素,它 Package 每个父元素,为"agenda"制作 Package 器,为"sessao"制作另一个 Package 器,和一个裹着两个孩子的包裹"packs" e "modulos"(我不希望显示它的父项。
一切都在按我想要的方式进行,除了一件事,那就是我正在挣扎的。我展示了我所有的牌(wrapped)水平放置,当一个 Package 器不适合屏幕时,它会转到下一行。只有一个元素的 Package 器工作得很好,但是对于有子元素的 Package 器,这是我挣扎的地方,因为如果 Package 器不适合屏幕,整个 Package 器会改变它的行,我只想把不适合这行的子元素,移到下一行例如,如果只有Agenda,Sessao和Pack适合一行,我只想把Modulo移到下一行,相反,Pack和Modulo都要改变.
下面是我的代码
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<template v-if="!item.hidden&&item.children && hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link :to="resolvePath(onlyOneChild.path)">
<!-- single -->
<el-card :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest} ">
<!-- <item v-if="onlyOneChild.meta" :title="onlyOneChild.meta.title" /> -->
<!-- <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" :collapse="collapse" /> -->
<!-- <span>{{ onlyOneChild.meta.title }}</span> -->
<div class="contentCard">
<div class="icon">
<i :class="onlyOneChild.meta.icon" />
</div>
<span class="title">
{{ generateTitle(onlyOneChild.meta.title) }}
</span>
</div>
</el-card>
</app-link>
</template>
<!-- group -->
<template v-else class="childCard" v-for="child in visibleChildren" :index="resolvePath(item.path)">
<app-link :to="resolvePath(child.path)">
<el-card class="contentClass" :index="resolvePath(child.path)">
<div class="contentCard">
<div class="icon">
<i :class="child.meta.icon" />
</div>
<span class="title">
{{ generateTitle(child.meta.title) }}
</span>
</div>
</el-card>
</app-link>
</template>
</div>
</template>
下面是我的CSS样式
<style lang="css" scoped>
.el-menu--inline span{
font-size: 0.9em;
}
.el-menu-item svg{
margin-right: 11px;
}
.el-menu-item-group__title {
display: none;
}
.is-active .menu-dot{
background: #cca13c;
}
.menu-dot {
width: 21px;
background: #304156;
height: 10px;
border-radius: 20px;
margin-right: 10px;
}
.contentClass{
margin-right:20px;
}
.childCard{
flex-grow:1;
}
.contentCard{
display:grid;
}
.icon{
text-align: center;
font-size: 50px;
}
.title{
text-align: center;
font-size: 10px;
}
.el-card{
margin-right: 20px;
margin-top: 10px;
min-height: 145px;
min-width: 250px;
flex-grow:1;
}
.menu-wrapper{
flex-wrap: wrap;
display: flex;
min-height: fit-content;
}
</style>
谢谢
编辑:由于上面所说的可能会让人感到困惑,为了更简单,我在一行中有几个 Package 器,里面有卡片。如果每个 Package 器有一张卡片,我的代码就可以正常工作,但是,我的一些 Package 器里面有两张或更多的卡片,当它到达屏幕的极限时(特别是如果是一个小屏幕),整个 Package 器转到下一行,相反,我只希望没有空间适合在同一行的卡,在 Package 器内,改变到下一行。
1条答案
按热度按时间xkrw2x1b1#
通过执行变通方案解决了我的问题(我发布了我所做的,这样它可能会帮助任何有类似问题的人),并简单地取消我的孩子。我使用了一个routes方法,那只是返回我的$store. state. permission. routes,并在我的模板上做了所有的魔术。我改变了我的方法,在routes方法上做了所有的魔术,然后简单地传递一个对象数组与我的未分组组件,像这样:
和我的模板