chenhaodong / mew-iview

  <template>

      <li :class="classes" @click.stop="handleClick"><slot></slot></li>

  </template>
  <script>

      import Emitter from '../../mixins/emitter';

      const prefixCls = 'ivu-menu';
  

      export default {

          name: 'MenuItem',

          mixins: [ Emitter ],

          props: {

              name: {

                  type: [String, Number],
                  required: true
              },
              disabled: {
                  type: Boolean,
                  default: false
              }
          },

          data () {

              return {
                  active: false

              };

          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}-item`,
                      {
                          [`${prefixCls}-item-active`]: this.active,
                          [`${prefixCls}-item-selected`]: this.active,
                          [`${prefixCls}-item-disabled`]: this.disabled
                      }

                  ];

              }

          },

          methods: {
              handleClick () {

                  if (this.disabled) return;

  
                  let parent = this.$parent;
                  let name = parent.$options.name;
                  while (parent && (!name || name !== 'Submenu')) {
                      parent = parent.$parent;
                      if (parent) name = parent.$options.name;
                  }
  
                  if (parent) {
                      this.dispatch('Submenu', 'on-menu-item-select', this.name);
                  } else {
                      this.dispatch('Menu', 'on-menu-item-select', this.name);
                  }

              }

          },
          mounted () {
              this.$on('on-update-active-name', (name) => {
                  if (this.name === name) {
                      this.active = true;
                      this.dispatch('Submenu', 'on-update-active-name', true);
                  } else {
                      this.active = false;
                  }
              });

          }

      };
  </script>