Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
<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>
|
||||
export default {
|
||||
name: 'AaTopMenu',
|
||||
props: {
|
||||
items: { type: Array, default: function () { return []; } },
|
||||
activeKey: { type: String, default: '' }
|
||||
},
|
||||
methods: {
|
||||
isActive: function (it) {
|
||||
if (it.key === this.activeKey) return true;
|
||||
return (it.children || []).some(function (s) { return s.key === this.activeKey; }, this);
|
||||
},
|
||||
select: function (it) {
|
||||
if (!it.children) this.$emit('update:activeKey', it.key);
|
||||
this.$emit('change', it.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./TopMenu.css"></style>
|
||||
Reference in New Issue
Block a user