34 lines
1.1 KiB
Plaintext
34 lines
1.1 KiB
Plaintext
<template>
|
|
<div class="aa-topmenu">
|
|
<div class="aa-topmenu-item" v-for="(it, i) in items" :key="i"
|
|
:class="isActive(it) ? 'is-active' : ''" @click="select(it)">
|
|
<span>{{ it.label }}</span>
|
|
<span v-if="it.badge" class="aa-topmenu-badge">{{ it.badge }}</span>
|
|
<span v-if="it.children" class="aa-topmenu-caret">▾</span>
|
|
<div v-if="it.children" class="aa-topmenu-dropdown">
|
|
<a v-for="(s, si) in it.children" :key="si" class="aa-topmenu-sub"
|
|
:class="s.key === activeKey ? 'is-active' : ''" @click.stop="select(s)">{{ s.label }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
items: { type: Array, default: () => [] },
|
|
activeKey: { type: String, default: '' }
|
|
});
|
|
const emit = defineEmits(['update:activeKey', 'change']);
|
|
|
|
function isActive(it) {
|
|
if (it.key === props.activeKey) return true;
|
|
return (it.children || []).some(s => s.key === props.activeKey);
|
|
}
|
|
function select(it) {
|
|
if (!it.children) emit('update:activeKey', it.key);
|
|
emit('change', it.key);
|
|
}
|
|
</script>
|
|
|
|
<style src="./TopMenu.css"></style>
|