hkyy/admin-frame/naf/frame/menu-item.vue

<template>
  <el-submenu :index="index" v-if="hasChildren">
    <template slot="title">
      <i :class="iconCls" v-if="hasIcon"></i>
      <span slot="title" @click.prevent="menuClick">{{ title }}</span>
    </template>
    <naf-menu-item
      v-for="(item, idx) in children"
      :key="idx"
      :index="index + '-' + idx"
      :title="item.title"
      :children="item.children"
      :options="item.options"
      :prefix="prefix"
      @naf-menu-item="$emit('naf-menu-item', $event)"
    >
    </naf-menu-item>
  </el-submenu>
  <el-menu-item :index="index" @click="menuClick" v-else
    ><i :class="iconCls"></i>
    <span slot="title" v-if="title.length < 10 && !hasTooltip">{{ title }}</span>
    <el-tooltip slot="title" v-else :content="hasTooltip ? options.tooltip : title" placement="top" effect="light">
      <span>{{ title.length > 9 ? title.substr(0, 9) + '...' : title }}</span>
    </el-tooltip>
  </el-menu-item>
</template>
<script>
export default {
  name: 'naf-menu-item',
  props: {
    title: String,
    index: String,
    options: Object,
    children: Array,
    prefix: { type: String, default: '' },
  },
  mounted() {
    let _this = this;
    //这里可放到全局，提供给子 iframe 调用
    window.menu = function(to) {
      _this.$router.push(to);
    };
  },
  methods: {
    menuClick() {
      console.debug('click menu item....');
      if (this.options.url) {
        window.open(this.options.url, this.options.target);
      } else if (this.options.path) {
        const to = `${this.prefix}${this.options.path}`;
        if (to != (this.$route && this.$route.path)) {
          this.$router.push(to);
        } else {
          this.$emit('naf-menu-item', this.options);
        }
      }
    },
  },
  computed: {
    hasChildren() {
      return this.children && this.children.length > 0;
    },
    hasIcon() {
      return this.options.icon && this.options.icon.length > 0;
    },
    hasTooltip() {
      return this.options.tooltip && this.options.tooltip.length > 0;
    },
    iconCls() {
      if (this.options.icon && !(this.options.icon.indexOf('el-') === 0)) {
        return `naf-icons naf-icon-${this.options.icon}`;
      }
      return this.options.icon;
    },
  },
};
</script>