fix: 修复在 IE,safari 等较老浏览器菜单闪动问题 #634 #593

Author: sendya

src/components/Menu/menu.js

@@ -1,8 +1,6 @@
 import Menu from 'ant-design-vue/es/menu'
 import Icon from 'ant-design-vue/es/icon'
 
-const { Item, SubMenu } = Menu
-
 export default {
   name: 'SMenu',
   props: {
@@ -72,6 +70,10 @@ export default {
         this.openKeys = latestOpenKey ? [latestOpenKey] : []
       }
     },
+    onSelect ({ item, key, selectedKeys }) {
+      this.selectedKeys = selectedKeys
+      this.$emit('select', { item, key, selectedKeys })
+    },
     updateMenu () {
       const routes = this.$route.matched.concat()
       const { hidden } = this.$route.meta
@@ -100,7 +102,7 @@ export default {
     },
     renderMenuItem (menu) {
       const target = menu.meta.target || null
-      const tag = target && 'a' || 'router-link'
+      const CustomTag = target && 'a' || 'router-link'
       const props = { to: { name: menu.name } }
       const attrs = { href: menu.path, target: menu.meta.target }
 
@@ -114,12 +116,12 @@ export default {
       }
 
       return (
-        <Item {...{ key: menu.path }}>
-          <tag {...{ props, attrs }}>
+        <Menu.Item {...{ key: menu.path }}>
+          <CustomTag {...{ props, attrs }}>
             {this.renderIcon(menu.meta.icon)}
             <span>{menu.meta.title}</span>
-          </tag>
-        </Item>
+          </CustomTag>
+        </Menu.Item>
       )
     },
     renderSubMenu (menu) {
@@ -128,13 +130,13 @@ export default {
         menu.children.forEach(item => itemArr.push(this.renderItem(item)))
       }
       return (
-        <SubMenu {...{ key: menu.path }}>
+        <Menu.SubMenu {...{ key: menu.path }}>
           <span slot="title">
             {this.renderIcon(menu.meta.icon)}
             <span>{menu.meta.title}</span>
           </span>
           {itemArr}
-        </SubMenu>
+        </Menu.SubMenu>
       )
     },
     renderIcon (icon) {
@@ -150,31 +152,26 @@ export default {
   },
 
   render () {
-    const { mode, theme, menu } = this
-    const props = {
-      mode: mode,
-      theme: theme,
-      openKeys: this.openKeys
-    }
-    const on = {
-      select: obj => {
-        this.selectedKeys = obj.selectedKeys
-        this.$emit('select', obj)
+    const dynamicProps = {
+      props: {
+        mode: this.mode,
+        theme: this.theme,
+        openKeys: this.openKeys,
+        selectedKeys: this.selectedKeys
       },
-      openChange: this.onOpenChange
+      on: {
+        openChange: this.onOpenChange,
+        select: this.onSelect
+      }
     }
 
-    const menuTree = menu.map(item => {
+    const menuTree = this.menu.map(item => {
       if (item.hidden) {
         return null
       }
       return this.renderItem(item)
     })
-    // {...{ props, on: on }}
-    return (
-      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
-        {menuTree}
-      </Menu>
-    )
+
+    return (<Menu {...dynamicProps}>{menuTree}</Menu>)
   }
 }

vue.config.js

@@ -76,7 +76,7 @@ const vueConfig = {
 
           // 'primary-color': '#F5222D',
           // 'link-color': '#F5222D',
-          // 'border-radius-base': '4px'
+          'border-radius-base': '2px'
         },
         // DO NOT REMOVE THIS LINE
         javascriptEnabled: true