aurora-admin/frameworks/TopMenu.vue2.vue

<template>
  <nav class="kole-menu" :data-direction="params.direction" :data-collapsed="collapsedAttr" aria-label="主菜单">
    <div v-if="params.direction === 'mixed'" class="kole-menu-top">
      <div v-for="it in items" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" @click="select(it)">
        <span v-if="it.icon" class="kole-menu-icon">{{ it.icon }}</span>
        <span class="kole-menu-label">{{ it.label }}</span>
        <span v-if="it.badge" class="kole-menu-badge">{{ it.badge }}</span>
      </div>
    </div>

    <div v-if="params.direction === 'mixed'" class="kole-menu-side">
      <div v-for="it in sideItems" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" @click="select(it)">
        <span class="kole-menu-label">{{ it.label }}</span>
      </div>
    </div>

    <template v-if="params.direction !== 'mixed'">
      <div v-for="it in items" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" :aria-expanded="hasKids(it) ? String(open === it.key) : undefined"
           @click="select(it)">
        <span v-if="it.icon" class="kole-menu-icon">{{ it.icon }}</span>
        <span class="kole-menu-label">{{ it.label }}</span>
        <span v-if="it.badge" class="kole-menu-badge">{{ it.badge }}</span>
        <span v-if="hasKids(it) && params.direction !== 'top'" class="kole-menu-arrow">›</span>
        <div v-if="hasKids(it) && params.direction !== 'mixed'" class="kole-menu-children">
          <div v-for="c in it.children" :key="c.key" class="kole-menu-item" :class="itemClass(c)"
               role="menuitem" tabindex="0" @click.stop="select(c)">
            <span class="kole-menu-label">{{ c.label }}</span>
          </div>
        </div>
      </div>
    </template>

    <div v-if="popItem" class="kole-menu-pop">
      <div class="kole-menu-pop-title">{{ popItem.label }}</div>
      <div v-for="c in popItem.children" :key="c.key" class="kole-menu-item" :class="itemClass(c)"
           role="menuitem" tabindex="0" @click="select(c)">
        <span class="kole-menu-label">{{ c.label }}</span>
      </div>
    </div>
  </nav>
</template>

<script>
/* Kole UI Menu 族 · TopMenu（Vue 2）
 * @generated by tools/gen-family-impl.mjs
 * 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
 * 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=top。
 * 族参数取值：direction=top, indicator=top, collapsed=false
 * 重跑生成：node tools/gen-family-impl.mjs nav-menu
 */
var FAMILY_DIRECTION = 'top';
var FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };

export default {
  name: 'KoleTopMenu',
  props: {
    items: { type: Array, default: function () { return []; } },
    activeKey: { type: String, default: '' }
  },
  data: function () {
    return {
      params: FAMILY_PARAMS,
      active: this.activeKey,
      open: '',
      collapsed: FAMILY_PARAMS.collapsed === true
    };
  },
  computed: {
    collapsedAttr: function () {
      return this.params.direction === 'side' ? String(this.collapsed) : undefined;
    },
    sideItems: function () {
      var self = this;
      var current = this.items.filter(function (x) { return self.isTopActive(x); })[0] || this.items[0];
      return (current && current.children) || [];
    },
    popItem: function () {
      var self = this;
      if (this.params.direction !== 'side' || !this.collapsed) return null;
      return this.items.filter(function (x) { return x.key === self.open; })[0] || null;
    }
  },
  methods: {
    hasKids: function (it) {
      return !!(it.children && it.children.length);
    },
    isTopActive: function (it) {
      if (it.key === this.active) return true;
      return (it.children || []).some(function (c) { return c.key === this.active; }, this);
    },
    itemClass: function (it) {
      return [
        it.key === this.active ? 'is-active' : '',
        it.disabled ? 'is-disabled' : '',
        this.hasKids(it) && it.key === this.open ? 'is-open' : ''
      ];
    },
    select: function (it) {
      if (it.disabled) return;
      if (this.hasKids(it)) {
        this.open = this.open === it.key ? '' : it.key;
        if (this.params.direction === 'mixed') this.active = it.key;
        return;
      }
      this.active = it.key;
      this.$emit('update:activeKey', it.key);
      this.$emit('change', it.key);
    }
  }
};
</script>

<style src="./TopMenu.css"></style>