mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
72 lines
1.1 KiB
Vue
72 lines
1.1 KiB
Vue
<template>
|
|
<van-collapse
|
|
v-model="active"
|
|
:border="false"
|
|
class="mobile-nav"
|
|
>
|
|
<van-collapse-item
|
|
class="mobile-nav__item"
|
|
:title="group.groupName"
|
|
:name="group.groupName"
|
|
>
|
|
<van-icon
|
|
:name="group.icon"
|
|
slot="right-icon"
|
|
class="mobile-nav__icon"
|
|
/>
|
|
<template v-for="(navItem, index) in group.list">
|
|
<van-cell
|
|
v-if="!navItem.disabled"
|
|
:key="index"
|
|
:to="'/' + base + navItem.path"
|
|
:title="navItem.title"
|
|
is-link
|
|
/>
|
|
</template>
|
|
</van-collapse-item>
|
|
</van-collapse>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
base: String,
|
|
group: Object
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
active: []
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.mobile-nav {
|
|
&__item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__icon {
|
|
font-size: 24px;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.van-collapse-item__content {
|
|
padding: 0;
|
|
}
|
|
|
|
.van-collapse-item__title {
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
</style>
|