md-iview 1.0.12

package/src/components/md-shrinkable-menu/components/sidebarMenu.vue

@@ -0,0 +1,167 @@
+<template>
+  <md-menu
+    class="menus"
+    ref="sideMenu"
+    :active-name="activeName"
+    :open-names="openNames"
+    :theme="menuTheme"
+    width="auto"
+    @on-select="changeMenu"
+  >
+    <template v-for="item in menuList">
+      <md-menu-item
+              :name="genMenuItemName(item)"
+              :key="'menuitem' + item.name"
+              class="menus-item"
+              style="padding: 0 14px 0 14px"
+              :style="{'height':cellHeight+'px', 'line-height':cellHeight+'px'}"
+              v-if="item.childList.length<=0"
+      >
+        <md-col>
+          <md-icon class="menus-item__icon"
+                   :type="item.icon"
+                   :size="iconSize"
+                   :color="iconColor"
+                   :key="'menuicon' + item.name">
+          </md-icon>
+          <span :key="'title' + item.name" class="menus-item__title">{{ itemTitle(item) }}</span>
+        </md-col>
+      </md-menu-item>
+      <md-divider style="margin: 0" v-if="item.childList.length<=0" v-show="showDivider"/>
+      <md-submenu class="menus-item" v-if="item.childList && item.childList.length>0" :name="genMenuItemName(item)" :key="item.name">
+        <template slot="title">
+          <Col>
+            <md-icon class="menus-item__icon" :type="item.icon" :size="iconSize" :color="iconColor"></md-icon>
+            <span class="menus-item__title">{{ itemTitle(item) }}</span>
+          </Col>
+        </template>
+        <template v-for="(child, index) in item.childList">
+          <md-menu-item
+                  :name="genMenuItemName(child)"
+                  :key="'menuitem' + child.name"
+                  class="menus-item__submenus"
+                  style="padding: 0 14px 0 14px"
+                  :style="{'height':cellHeight+'px', 'line-height':cellHeight+'px'}"
+                  v-if="!child.childList || child.childList.length<=0"
+          >
+            <md-col offset="2">
+              <md-icon class="menus-item__icon" :type="child.icon" :size="iconSize" :color="iconColor"></md-icon>
+              <span :key="'title' + child.name" class="menus-item__title">{{ itemTitle(child) }}</span>
+            </md-col>
+          </md-menu-item>
+          <Submenu class="menus-item" v-if="child.childList && child.childList.length>0" :name="genMenuItemName(child)" :key="child.name">
+            <template slot="title">
+              <Col offset="2">
+                <md-icon class="menus-item__icon" :type="child.icon" :size="iconSize" :color="iconColor"></md-icon>
+                <span class="menus-item__title">{{ itemTitle(child) }}</span>
+              </Col>
+            </template>
+            <template v-for="child2 in child.childList">
+              <md-menu-item
+                      :name="genMenuItemName(child2)"
+                      :key="'menuitem' + child2.name"
+                      class="menus-item__submenus"
+                      style="padding: 0 14px 0 14px"
+                      :style="{'height':cellHeight+'px', 'line-height':cellHeight+'px'}"
+              >
+                <md-col offset="4">
+                  <md-icon class="menus-item__icon" :type="child2.icon" :size="iconSize" :color="iconColor"></md-icon>
+                  <span :key="'title' + child2.route" class="menus-item__title">{{ itemTitle(child2) }}</span>
+                </md-col>
+              </md-menu-item>
+            </template>
+          </Submenu>
+        </template>
+      </md-submenu>
+      <md-divider style="margin: 0" v-if="item.childList && item.childList.length>0" v-show="showDivider"/>
+    </template>
+  </md-menu>
+</template>
+
+<script>
+import {consoleError} from "../../../utils/console";
+
+export default {
+  name: "sidebarMenu",
+  filters:{
+    emptyString(val) {
+      if (!val) return '';
+      return val
+    }
+  },
+  props: {
+    menuList: Array,
+    menuTheme: {
+      type: String,
+      default: "light"
+    },
+    openNames: {
+      type: Array
+    },
+    showDivider:{
+      type:Boolean,
+      default:true
+    },
+    iconColor:{
+      type:Object|String,
+      default:'#C5C8CD'
+    },
+    iconSize: {
+      type:Number,
+      default:16,
+    },
+    cellHeight:{
+      type:Number,
+      default:56,
+    }
+  },
+  data() {
+    return {
+      activeName:'',
+    }
+  },
+  watch:{
+    '$route':{
+      immediate:true,
+      handler(to) {
+        this.activeName = to.path;
+      }
+    }
+  },
+  methods: {
+    genMenuItemName(item) {
+      if (!item.route) {
+        return `/${item.level}`
+      };
+      return item.route
+    },
+    changeMenu(active) {
+      // this.$emit("on-change", this.$route.path);
+      this.activeName = active;
+      active && this.$emit("on-change", active);
+    },
+    itemTitle(item) {
+      if (!item) return "";
+      return item.name;
+
+/*      if (typeof item.title === "object") {
+        return item.name.i18n;
+        // return this.$t(item.title.i18n);
+      } else {
+        return item.name;
+      }*/
+    }
+  },
+  updated() {
+    this.$nextTick(() => {
+      if (this.$refs.sideMenu) {
+        this.$refs.sideMenu.updateOpened();
+      }
+    });
+  }
+};
+</script>
+
+<style lang="less" scoped>
+  @import "../styles/menu.less";
+</style>

package/src/components/md-shrinkable-menu/components/sidebarMenuShrink.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="sidebar-menu-shrink">
+        <template v-for="(item, index) in menuList">
+            <div style="text-align: center;position: relative;" :key="index">
+                <Dropdown transfer placement="right-start" :key="index" @on-click="changeMenu" :class="{'menu-shrink--active':isActive(item)}">
+                    <Button style="width: 80px;padding:10px 0;" type="text" class="shrink-btn-item"  @click="changeMenu(item)">
+                        <md-icon :size="20" :color="iconColor" :type="item.icon"></md-icon>
+                    </Button>
+                    <DropdownMenu style="width: 250px;" slot="list" v-if="item.childList.length>0">
+                        <template v-for="(child, i) in item.childList">
+                            <DropdownItem :name="genMenuItemName(child)" :key="i" v-if="!child.childList || child.childList.length<=0">
+                              <md-icon :type="child.icon" :color="iconColor" :size="iconSize"></md-icon>
+                              <span style="padding-left:10px;" class="menus-item__title">{{ itemTitle(child) }}</span>
+                            </DropdownItem>
+                            <Dropdown transfer placement="right-start"
+                                      :key="i"
+                                      @on-click="changeMenu"
+                                      :class="{'menu-shrink--active':isActive(child)}"
+                                      v-if="child.childList && child.childList.length>0">
+                                <DropdownItem :name="genMenuItemName(child)" :key="child.name">
+                                    <md-icon :type="child.icon" :color="iconColor" :size="iconSize"></md-icon>
+                                    <span style="padding-left:10px;" class="menus-item__title">{{ itemTitle(child) }}</span>
+                                </DropdownItem>
+                                <DropdownMenu style="width: 250px;" slot="list" v-if="child.childList.length>0">
+                                    <template v-for="(child2, i) in child.childList">
+
+                                        <DropdownItem :name="genMenuItemName(child2)" :key="i">
+                                            <md-icon :type="child2.icon" :color="iconColor" :size="iconSize"></md-icon>
+                                            <span style="padding-left:10px;" class="menus-item__title">{{ itemTitle(child2) }}</span>
+                                        </DropdownItem>
+                                    </template>
+                                </DropdownMenu>
+                            </Dropdown>
+                        </template>
+                    </DropdownMenu>
+                </Dropdown>
+               <!-- <Dropdown transfer v-else placement="right-start" :key="index" @on-click="changeMenu">
+                    <Button @click="changeMenu(item.childList[index].name)" style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
+                         <md-icon :size="20" :color="iconColor" :type="item.icon || item.icon"></md-icon>
+                    </Button>
+                    <DropdownMenu style="width: 250px;" slot="list">
+                        <DropdownItem :name="item.childList[0].name" :key="'d' + index">
+                            <md-icon :size="20" :color="iconColor" :type="item.childList[0].icon || item.icon"></md-icon>
+                            <span style="padding-left:10px;">{{ itemTitle(item.childList[0]) }}</span>
+                        </DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>-->
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'sidebarMenuShrink',
+    props: {
+      menuList: {
+        type: Array
+      },
+      iconColor: {
+        type: String,
+        default: 'white'
+      },
+      iconSize: {
+        type: Number,
+        default: 16,
+      },
+      menuTheme: {
+        type: String,
+        default: 'dark'
+      }
+    },
+  watch:{
+    '$route':{
+      immediate:true,
+      handler(to) {
+        this.activeName = to.path;
+      }
+    }
+  },
+  data() {
+      return {
+        activeName:'',
+      }
+  },
+    methods: {
+      isActive(item) {
+        return this.activeName.indexOf(this.genMenuItemName(item)) !== -1
+        //return this.genMenuItemName(item) === this.activeName;
+      },
+      genMenuItemName(item) {
+        if (!item.route) {
+          return `/${item.level}`
+        };
+        return item.route
+      },
+      changeMenu(active) {
+        // console.log(active,  this.genMenuItemName(active))
+        if (Object.prototype.toString.call(active) === "[object String]") {
+          this.activeName = active
+          this.$emit('on-change', active);
+        } else {
+          this.activeName = this.genMenuItemName(active);
+          active.route && this.$emit('on-change', active.route);
+        }
+      },
+        itemTitle (item) {
+          return item.name;
+            // if (typeof item.title === 'object') {
+            //   return item.title.i18n
+            //     // return this.$t(item.title.i18n);
+            // } else {
+            //     return item.title;
+            // }
+        }
+    }
+};
+</script>
+

package/src/components/md-shrinkable-menu/demo/data/cachePage.js

@@ -0,0 +1 @@
+export default ["errorpage_index", "mutative-router", "order-info", "argument-page", "shopping", "accesstest_index", "access_index", "exportable-table", "draggable-list", "searchable-table", "international_index"]

package/src/components/md-shrinkable-menu/demo/data/currentPath.js

@@ -0,0 +1,9 @@
+export  default [{
+  "title": "首页",
+  "path": "/home",
+  "name": "home_index"
+}, {
+  "title": "权限管理",
+  "path": "",
+  "name": "access_index"
+}]