@penggy/element-ui 2.4.11

package/packages/menu/src/menu-item.vue

@@ -0,0 +1,112 @@
+<template>
+  <li class="el-menu-item"
+    role="menuitem"
+    tabindex="-1"
+    :style="[paddingStyle, itemStyle, { backgroundColor }]"
+    :class="{
+      'is-active': active,
+      'is-disabled': disabled
+    }"
+    @click="handleClick"
+    @mouseenter="onMouseEnter"
+    @focus="onMouseEnter"
+    @blur="onMouseLeave"
+    @mouseleave="onMouseLeave"
+  >
+    <el-tooltip
+      v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
+      effect="dark"
+      placement="right">
+      <div slot="content"><slot name="title"></slot></div>
+      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
+        <slot></slot>
+      </div>
+    </el-tooltip>
+    <template v-else>
+      <slot></slot>
+      <slot name="title"></slot>
+    </template>
+  </li>
+</template>
+<script>
+  import Menu from './menu-mixin';
+  import ElTooltip from 'element-ui/packages/tooltip';
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElMenuItem',
+
+    componentName: 'ElMenuItem',
+
+    mixins: [Menu, Emitter],
+
+    components: { ElTooltip },
+
+    props: {
+      index: {
+        type: String,
+        required: true
+      },
+      route: [String, Object],
+      disabled: Boolean
+    },
+    computed: {
+      active() {
+        return this.index === this.rootMenu.activeIndex;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      itemStyle() {
+        const style = {
+          color: this.active ? this.activeTextColor : this.textColor
+        };
+        if (this.mode === 'horizontal' && !this.isNested) {
+          style.borderBottomColor = this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent';
+        }
+        return style;
+      },
+      isNested() {
+        return this.parentMenu !== this.rootMenu;
+      }
+    },
+    methods: {
+      onMouseEnter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.hoverBackground;
+      },
+      onMouseLeave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.backgroundColor;
+      },
+      handleClick() {
+        if (!this.disabled) {
+          this.dispatch('ElMenu', 'item-click', this);
+          this.$emit('click', this);
+        }
+      }
+    },
+    mounted() {
+      this.parentMenu.addItem(this);
+      this.rootMenu.addItem(this);
+    },
+    beforeDestroy() {
+      this.parentMenu.removeItem(this);
+      this.rootMenu.removeItem(this);
+    }
+  };
+</script>

package/packages/menu/src/menu-mixin.js

@@ -0,0 +1,44 @@
+export default {
+  inject: ['rootMenu'],
+  computed: {
+    indexPath() {
+      const path = [this.index];
+      let parent = this.$parent;
+      while (parent.$options.componentName !== 'ElMenu') {
+        if (parent.index) {
+          path.unshift(parent.index);
+        }
+        parent = parent.$parent;
+      }
+      return path;
+    },
+    parentMenu() {
+      let parent = this.$parent;
+      while (
+        parent &&
+        ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1
+      ) {
+        parent = parent.$parent;
+      }
+      return parent;
+    },
+    paddingStyle() {
+      if (this.rootMenu.mode !== 'vertical') return {};
+
+      let padding = 20;
+      let parent = this.$parent;
+
+      if (this.rootMenu.collapse) {
+        padding = 20;
+      } else {
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += 20;
+          }
+          parent = parent.$parent;
+        }
+      }
+      return {paddingLeft: padding + 'px'};
+    }
+  }
+};

package/packages/menu/src/menu.vue

@@ -0,0 +1,311 @@
+<script type="text/jsx">
+  import emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
+  import Menubar from 'element-ui/src/utils/menu/aria-menubar';
+  import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
+
+  export default {
+    name: 'ElMenu',
+
+    render (h) {
+      const component = (
+        <ul
+          role="menubar"
+          key={ +this.collapse }
+          style={{ backgroundColor: this.backgroundColor || '' }}
+          class={{
+            'el-menu--horizontal': this.mode === 'horizontal',
+            'el-menu--collapse': this.collapse,
+            "el-menu": true
+          }}
+        >
+          { this.$slots.default }
+        </ul>
+      );
+
+      if (this.collapseTransition) {
+        return (
+          <el-menu-collapse-transition>
+            { component }
+          </el-menu-collapse-transition>
+        );
+      } else {
+        return component;
+      }
+    },
+
+    componentName: 'ElMenu',
+
+    mixins: [emitter, Migrating],
+
+    provide() {
+      return {
+        rootMenu: this
+      };
+    },
+
+    components: {
+      'el-menu-collapse-transition': {
+        functional: true,
+        render(createElement, context) {
+          const data = {
+            props: {
+              mode: 'out-in'
+            },
+            on: {
+              beforeEnter(el) {
+                el.style.opacity = 0.2;
+              },
+
+              enter(el) {
+                addClass(el, 'el-opacity-transition');
+                el.style.opacity = 1;
+              },
+
+              afterEnter(el) {
+                removeClass(el, 'el-opacity-transition');
+                el.style.opacity = '';
+              },
+
+              beforeLeave(el) {
+                if (!el.dataset) el.dataset = {};
+
+                if (hasClass(el, 'el-menu--collapse')) {
+                  removeClass(el, 'el-menu--collapse');
+                  el.dataset.oldOverflow = el.style.overflow;
+                  el.dataset.scrollWidth = el.clientWidth;
+                  addClass(el, 'el-menu--collapse');
+                } else {
+                  addClass(el, 'el-menu--collapse');
+                  el.dataset.oldOverflow = el.style.overflow;
+                  el.dataset.scrollWidth = el.clientWidth;
+                  removeClass(el, 'el-menu--collapse');
+                }
+
+                el.style.width = el.scrollWidth + 'px';
+                el.style.overflow = 'hidden';
+              },
+
+              leave(el) {
+                addClass(el, 'horizontal-collapse-transition');
+                el.style.width = el.dataset.scrollWidth + 'px';
+              }
+            }
+          };
+          return createElement('transition', data, context.children);
+        }
+      }
+    },
+
+    props: {
+      mode: {
+        type: String,
+        default: 'vertical'
+      },
+      defaultActive: {
+        type: String,
+        default: ''
+      },
+      defaultOpeneds: Array,
+      uniqueOpened: Boolean,
+      router: Boolean,
+      menuTrigger: {
+        type: String,
+        default: 'hover'
+      },
+      collapse: Boolean,
+      backgroundColor: String,
+      textColor: String,
+      activeTextColor: String,
+      collapseTransition: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        activeIndex: this.defaultActive,
+        openedMenus: (this.defaultOpeneds && !this.collapse) ? this.defaultOpeneds.slice(0) : [],
+        items: {},
+        submenus: {}
+      };
+    },
+    computed: {
+      hoverBackground() {
+        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
+      },
+      isMenuPopup() {
+        return this.mode === 'horizontal' || (this.mode === 'vertical' && this.collapse);
+      }
+    },
+    watch: {
+      defaultActive: 'updateActiveIndex',
+
+      defaultOpeneds(value) {
+        if (!this.collapse) {
+          this.openedMenus = value;
+        }
+      },
+
+      collapse(value) {
+        if (value) this.openedMenus = [];
+        this.broadcast('ElSubmenu', 'toggle-collapse', value);
+      }
+    },
+    methods: {
+      updateActiveIndex(val) {
+        const item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
+        if (item) {
+          this.activeIndex = item.index;
+          this.initOpenedMenu();
+        } else {
+          this.activeIndex = null;
+        }
+      },
+
+      getMigratingConfig() {
+        return {
+          props: {
+            'theme': 'theme is removed.'
+          }
+        };
+      },
+      getColorChannels(color) {
+        color = color.replace('#', '');
+        if (/^[0-9a-fA-F]{3}$/.test(color)) {
+          color = color.split('');
+          for (let i = 2; i >= 0; i--) {
+            color.splice(i, 0, color[i]);
+          }
+          color = color.join('');
+        }
+        if (/^[0-9a-fA-F]{6}$/.test(color)) {
+          return {
+            red: parseInt(color.slice(0, 2), 16),
+            green: parseInt(color.slice(2, 4), 16),
+            blue: parseInt(color.slice(4, 6), 16)
+          };
+        } else {
+          return {
+            red: 255,
+            green: 255,
+            blue: 255
+          };
+        }
+      },
+      mixColor(color, percent) {
+        let { red, green, blue } = this.getColorChannels(color);
+        if (percent > 0) { // shade given color
+          red *= 1 - percent;
+          green *= 1 - percent;
+          blue *= 1 - percent;
+        } else { // tint given color
+          red += (255 - red) * percent;
+          green += (255 - green) * percent;
+          blue += (255 - blue) * percent;
+        }
+        return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
+      },
+      addItem(item) {
+        this.$set(this.items, item.index, item);
+      },
+      removeItem(item) {
+        delete this.items[item.index];
+      },
+      addSubmenu(item) {
+        this.$set(this.submenus, item.index, item);
+      },
+      removeSubmenu(item) {
+        delete this.submenus[item.index];
+      },
+      openMenu(index, indexPath) {
+        let openedMenus = this.openedMenus;
+        if (openedMenus.indexOf(index) !== -1) return;
+        // 将不在该菜单路径下的其余菜单收起
+        // collapse all menu that are not under current menu item
+        if (this.uniqueOpened) {
+          this.openedMenus = openedMenus.filter(index => {
+            return indexPath.indexOf(index) !== -1;
+          });
+        }
+        this.openedMenus.push(index);
+      },
+      closeMenu(index) {
+        const i = this.openedMenus.indexOf(index);
+        if (i !== -1) {
+          this.openedMenus.splice(i, 1);
+        }
+      },
+      handleSubmenuClick(submenu) {
+        const { index, indexPath } = submenu;
+        let isOpened = this.openedMenus.indexOf(index) !== -1;
+
+        if (isOpened) {
+          this.closeMenu(index);
+          this.$emit('close', index, indexPath);
+        } else {
+          this.openMenu(index, indexPath);
+          this.$emit('open', index, indexPath);
+        }
+      },
+      handleItemClick(item) {
+        const { index, indexPath } = item;
+        const oldActiveIndex = this.activeIndex;
+
+        this.activeIndex = item.index;
+        this.$emit('select', index, indexPath, item);
+
+        if (this.mode === 'horizontal' || this.collapse) {
+          this.openedMenus = [];
+        }
+
+        if (this.router) {
+          this.routeToItem(item, (error) => {
+            this.activeIndex = oldActiveIndex;
+            if (error) console.error(error);
+          });
+        }
+      },
+      // 初始化展开菜单
+      // initialize opened menu
+      initOpenedMenu() {
+        const index = this.activeIndex;
+        const activeItem = this.items[index];
+        if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
+
+        let indexPath = activeItem.indexPath;
+
+        // 展开该菜单项的路径上所有子菜单
+        // expand all submenus of the menu item
+        indexPath.forEach(index => {
+          let submenu = this.submenus[index];
+          submenu && this.openMenu(index, submenu.indexPath);
+        });
+      },
+      routeToItem(item, onError) {
+        let route = item.route || item.index;
+        try {
+          this.$router.push(route, () => {}, onError);
+        } catch (e) {
+          console.error(e);
+        }
+      },
+      open(index) {
+        const { indexPath } = this.submenus[index.toString()];
+        indexPath.forEach(i => this.openMenu(i, indexPath));
+      },
+      close(index) {
+        this.closeMenu(index);
+      }
+    },
+    mounted() {
+      this.initOpenedMenu();
+      this.$on('item-click', this.handleItemClick);
+      this.$on('submenu-click', this.handleSubmenuClick);
+      if (this.mode === 'horizontal') {
+        new Menubar(this.$el); // eslint-disable-line
+      }
+      this.$watch('items', this.updateActiveIndex);
+    }
+  };
+</script>