github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: the menu flickering problem in mobile safari browser. (#106)

pull/108/head
Ryan Wang 2020-03-19 20:31:56 +08:00 committed by GitHub
parent 49305b44e3
commit 2775383ca2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Menu/menu.js
View File

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

2
src/views/dashboard/Dashboard.vue
View File

@ -39,7 +39,7 @@
:to="{ name:'Comments' }" :to="{ name:'Comments' }"
slot="action" slot="action"
> >
<a-icon type="link" /> <a-icon type="unordered-list" />
</router-link> </router-link>
</analysis-card> </analysis-card>
</a-col> </a-col>