feat: add

examples/package.json

@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ant-design/icons": "^4.0.0-alpha.11",
+    "@ant-design/icons-vue": "2.0.0",
     "ant-design-vue": "^1.6.2",
     "core-js": "^3.1.2",
     "vue-i18n": "^8.15.0",
@@ -26,6 +26,8 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@ant-design/colors": "4.0.0",
+    "@ant-design/icons": "2.0.0",
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
     "@vue/cli-plugin-router": "^4.0.0",
@@ -39,6 +41,7 @@
     "eslint": "^5.16.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-vue": "^5.0.0",
+    "file-loader": "^6.2.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "vue-svg-icon-loader": "^2.1.1",

examples/src/layouts/BasicLayout.vue

@@ -2,6 +2,7 @@
   <pro-layout
     :menus="menus"
     :collapsed="collapsed"
+    :openOnceKey="false"
     :mediaQuery="query"
     :isMobile="isMobile"
     :handleMediaQuery="handleMediaQuery"
@@ -67,6 +68,11 @@ export default {
       menus: [],
       // 侧栏收起状态
       collapsed: false,
+      // 选中的菜单项
+      selectedKeys: [],
+      // 打开的菜单项
+      openKeys: [],
+
       // 自动隐藏头部栏
       autoHideHeader: false,
       // 媒体查询
@@ -99,9 +105,35 @@ export default {
   },
   created () {
     this.menus = asyncRouterMap.find(item => item.path === '/').children
+
+    this.$watch('$route', () => {
+      this.handleRouteUpdate()
+    })
+  },
+  mounted () {
+    // this.handleRouteUpdate()
+    this.openKeys = ['/dashboard', '/form']
   },
   methods: {
     i18nRender,
+    handleRouteUpdate () {
+      const routes = this.$route.matched.concat()
+      const { hidden } = this.$route.meta
+      if (routes.length >= 3 && hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[routes.length - 1].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+
+      const openKeys = []
+      if (this.layout === 'sidemenu') {
+        routes.forEach(item => {
+          item.path && openKeys.push(item.path)
+        })
+      }
+      this.openKeys = openKeys
+    },
     handleMediaQuery (val) {
       this.query = val
       if (this.isMobile && !val['screen-xs']) {
@@ -116,6 +148,14 @@ export default {
     handleCollapse (val) {
       this.collapsed = val
     },
+    handleSelect (selectedKeys) {
+      console.log('handleSelect', selectedKeys)
+      this.selectedKeys = selectedKeys
+    },
+    handleOpenChange (openKeys) {
+      console.log('handleOpenChange', openKeys)
+      this.openKeys = openKeys
+    },
     handleSettingChange ({ type, value }) {
       console.log('type', type, value)
       type && (this.settings[type] = value)

examples/vue.config.js

@@ -34,7 +34,7 @@ const defaultConfig = {
   configureWebpack: {
     plugins: [
       // Ignore all locale files of moment.js
-      new IgnorePlugin(/^\.\/locale$/, /moment$/)
+      // new IgnorePlugin(/^\.\/locale$/, /moment$/)
     ],
     resolve: {
       alias: {

package.json

@@ -38,6 +38,7 @@
         "@types/jest": "^24.0.17",
         "@types/node": "^10.5.5",
         "@types/vue": "^2.0.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
         "@vue/server-test-utils": "1.0.0-beta.16",
         "@vue/test-utils": "1.0.0-beta.16",
         "babel-core": "^7.0.0-bridge.0",

src/BasicLayout.jsx

@@ -77,7 +77,7 @@ const BasicLayout = {
   functional: true,
   props: BasicLayoutProps,
   render (h, content) {
-    const { props, children } = content
+    const { props, children, listeners } = content
     const {
       layout,
       // theme,
@@ -113,7 +113,8 @@ const BasicLayout = {
       collapsedButtonRender,
       breadcrumbRender,
       headerContentRender,
-      menuRender
+      menuRender,
+      ...listeners,
     }
 
     return (

src/components/RouteMenu/BaseMenu.jsx

@@ -15,6 +15,9 @@ export const RouteMenuProps = {
   theme: PropTypes.string.def('dark'),
   mode: PropTypes.string.def('inline'),
   collapsed: PropTypes.bool.def(false),
+  openKeys: PropTypes.array.def(undefined),
+  selectedKeys: PropTypes.array.def(undefined),
+  openOnceKey: PropTypes.bool.def(true),
   i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false),
 }
 
@@ -84,40 +87,42 @@ const RouteMenu = {
   props: RouteMenuProps,
   data () {
     return {
-      openKeys: [],
-      selectedKeys: [],
+      sOpenKeys: [],
+      sSelectedKeys: [],
       cachedOpenKeys: [],
       cachedSelectedKeys: [],
     }
   },
-  render (h) {
-    const { mode, theme, menus, i18nRender } = this
+  render (h, ctx) {
+    const { mode, theme, menus, i18nRender, openOnceKey } = this
     const handleOpenChange = (openKeys) => {
+
       // 在水平模式下时，不再执行后续
       if (mode === 'horizontal') {
-        this.openKeys = openKeys
+        this.sOpenKeys = openKeys
         return
       }
-      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
-      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
-        this.openKeys = openKeys
+      const latestOpenKey = openKeys.find(key => !this.sOpenKeys.includes(key))
+      if (!openOnceKey) {
+        this.sOpenKeys = openKeys
       } else {
-        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+        this.sOpenKeys = latestOpenKey ? [latestOpenKey] : []
       }
+      this.$emit('openChange', openKeys)
     }
 
     const dynamicProps = {
       props: {
         mode,
         theme,
-        openKeys: this.openKeys,
-        selectedKeys: this.selectedKeys
+        openKeys: this.openKeys || this.sOpenKeys,
+        selectedKeys: this.selectedKeys || this.sSelectedKeys
       },
       on: {
-        select: menu => {
-          this.$emit('select', menu)
-          if (!httpReg.test(menu.key)) {
-            this.selectedKeys = menu.selectedKeys
+        select: args => {
+          this.$emit('select', args.selectedKeys)
+          if (!httpReg.test(args.key)) {
+            this.sSelectedKeys = args.selectedKeys
           }
         },
         openChange: handleOpenChange
@@ -135,13 +140,16 @@ const RouteMenu = {
   methods: {
     updateMenu () {
       const routes = this.$route.matched.concat()
-      const { hidden } = this.$route.meta
-      if (routes.length >= 3 && hidden) {
-        routes.pop()
-        this.selectedKeys = [routes[routes.length - 1].path]
-      } else {
-        this.selectedKeys = [routes.pop().path]
+      if (this.selectedKeys === undefined) {
+        const { hidden } = this.$route.meta
+        if (routes.length >= 3 && hidden) {
+          routes.pop()
+          this.sSelectedKeys = [routes[routes.length - 1].path]
+        } else {
+          this.sSelectedKeys = [routes.pop().path]
+        }
       }
+
       const openKeys = []
       if (this.mode === 'inline') {
         routes.forEach(item => {
@@ -149,13 +157,12 @@ const RouteMenu = {
         })
       }
 
-      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.sOpenKeys = openKeys)
     }
   },
   computed: {
     rootSubmenuKeys: vm => {
-      const keys = []
-      vm.menus.forEach(item => keys.push(item.path))
+      const keys =vm.menus.map(item => item.path) || []
       return keys
     }
   },
@@ -166,11 +173,18 @@ const RouteMenu = {
     this.$watch('collapsed', val => {
       if (val) {
         this.cachedOpenKeys = this.openKeys.concat()
-        this.openKeys = []
+        this.sOpenKeys = []
       } else {
-        this.openKeys = this.cachedOpenKeys
+        this.sOpenKeys = this.cachedOpenKeys
       }
     })
+
+    if (this.selectedKeys !== undefined) {
+      this.sSelectedKeys = this.selectedKeys
+    }
+    if (this.openKeys !== undefined) {
+      this.sOpenKeys = this.openKeys
+    }
   },
   mounted () {
     this.updateMenu()

src/components/SiderMenu/SiderMenu.jsx

@@ -15,6 +15,9 @@ export const SiderMenuProps = {
   contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
   collapsible: PropTypes.bool,
   collapsed: PropTypes.bool,
+  openKeys: PropTypes.array.def(undefined),
+  selectedKeys: PropTypes.array.def(undefined),
+  openOnceKey: PropTypes.bool.def(true),
   handleCollapse: PropTypes.func,
   menus: PropTypes.array,
   siderWidth: PropTypes.number.def(256),
@@ -26,6 +29,10 @@ export const SiderMenuProps = {
   // render function or vnode
   menuHeaderRender: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.object, PropTypes.bool]),
   menuRender: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.object, PropTypes.bool]),
+
+  // listeners
+  openChange: PropTypes.func,
+  select: PropTypes.func,
 }
 
 export const defaultRenderLogo = (h, logo) => {
@@ -75,6 +82,14 @@ const SiderMenu = {
     const {
       collapsible,
       collapsed,
+
+      selectedKeys,
+      openKeys,
+
+      openChange = () => null,
+      select = () => null,
+
+      openOnceKey,
       siderWidth,
       fixSiderbar,
       mode,
@@ -124,7 +139,18 @@ const SiderMenu = {
           && menuRender(h, this.$props)
           || menuRender
       ) || (
-        <BaseMenu collapsed={collapsed} menus={menus} mode={mode} theme={theme} i18nRender={i18nRender} />
+        <BaseMenu
+          collapsed={collapsed}
+          openKeys={openKeys}
+          selectedKeys={selectedKeys}
+          openOnceKey={openOnceKey}
+          onOpenChange={openChange}
+          onSelect={select}
+          menus={menus}
+          mode={mode}
+          theme={theme}
+          i18nRender={i18nRender}
+        />
       )}
     </Sider>)
   }