menu.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. import Menu from 'ant-design-vue/es/menu'
  2. import Icon from 'ant-design-vue/es/icon'
  3. const { Item, SubMenu } = Menu
  4. export default {
  5. name: 'SMenu',
  6. props: {
  7. menu: {
  8. type: Array,
  9. required: true
  10. },
  11. theme: {
  12. type: String,
  13. required: false,
  14. default: 'dark'
  15. },
  16. mode: {
  17. type: String,
  18. required: false,
  19. default: 'inline'
  20. },
  21. collapsed: {
  22. type: Boolean,
  23. required: false,
  24. default: false
  25. }
  26. },
  27. data () {
  28. return {
  29. openKeys: [],
  30. selectedKeys: [],
  31. cachedOpenKeys: []
  32. }
  33. },
  34. computed: {
  35. rootSubmenuKeys: vm => {
  36. const keys = []
  37. vm.menu.forEach(item => keys.push(item.path))
  38. return keys
  39. }
  40. },
  41. mounted () {
  42. this.updateMenu()
  43. },
  44. watch: {
  45. collapsed (val) {
  46. if (val) {
  47. this.cachedOpenKeys = this.openKeys.concat()
  48. this.openKeys = []
  49. } else {
  50. this.openKeys = this.cachedOpenKeys
  51. }
  52. },
  53. $route: function () {
  54. this.updateMenu()
  55. }
  56. },
  57. methods: {
  58. // select menu item
  59. onOpenChange (openKeys) {
  60. // 在水平模式下时执行,并且不再执行后续
  61. if (this.mode === 'horizontal') {
  62. this.openKeys = openKeys
  63. return
  64. }
  65. // 非水平模式时
  66. const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
  67. if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
  68. this.openKeys = openKeys
  69. } else {
  70. this.openKeys = latestOpenKey ? [latestOpenKey] : []
  71. }
  72. },
  73. updateMenu () {
  74. const routes = this.$route.matched.concat()
  75. const { hidden } = this.$route.meta
  76. if (routes.length >= 3 && hidden) {
  77. routes.pop()
  78. this.selectedKeys = [routes[routes.length - 1].path]
  79. } else {
  80. this.selectedKeys = [routes.pop().path]
  81. }
  82. const openKeys = []
  83. if (this.mode === 'inline') {
  84. routes.forEach(item => {
  85. openKeys.push(item.path)
  86. })
  87. }
  88. this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
  89. },
  90. // render
  91. renderItem (menu) {
  92. if (!menu.hidden) {
  93. return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
  94. }
  95. return null
  96. },
  97. renderMenuItem (menu) {
  98. const target = menu.meta.target || null
  99. const tag = target && 'a' || 'router-link'
  100. const props = { to: { name: menu.name } }
  101. const attrs = { href: menu.path, target: menu.meta.target }
  102. if (menu.children && menu.hideChildrenInMenu) {
  103. // 把有子菜单的 并且 父菜单是要隐藏子菜单的
  104. // 都给子菜单增加一个 hidden 属性
  105. // 用来给刷新页面时, selectedKeys 做控制用
  106. menu.children.forEach(item => {
  107. item.meta = Object.assign(item.meta, { hidden: true })
  108. })
  109. }
  110. return (
  111. <Item {...{ key: menu.path }}>
  112. <tag {...{ props, attrs }}>
  113. {this.renderIcon(menu.meta.icon)}
  114. <span>{menu.meta.title}</span>
  115. </tag>
  116. </Item>
  117. )
  118. },
  119. renderSubMenu (menu) {
  120. const itemArr = []
  121. if (!menu.hideChildrenInMenu) {
  122. menu.children.forEach(item => itemArr.push(this.renderItem(item)))
  123. }
  124. return (
  125. <SubMenu {...{ key: menu.path }}>
  126. <span slot="title">
  127. {this.renderIcon(menu.meta.icon)}
  128. <span>{menu.meta.title}</span>
  129. </span>
  130. {itemArr}
  131. </SubMenu>
  132. )
  133. },
  134. renderIcon (icon) {
  135. if (icon === 'none' || icon === undefined) {
  136. return null
  137. }
  138. const props = {}
  139. typeof (icon) === 'object' ? props.component = icon : props.type = icon
  140. return (
  141. <Icon {... { props } }/>
  142. )
  143. }
  144. },
  145. render () {
  146. const { mode, theme, menu } = this
  147. const props = {
  148. mode: mode,
  149. theme: theme,
  150. openKeys: this.openKeys
  151. }
  152. const on = {
  153. select: obj => {
  154. this.selectedKeys = obj.selectedKeys
  155. this.$emit('select', obj)
  156. },
  157. openChange: this.onOpenChange
  158. }
  159. const menuTree = menu.map(item => {
  160. if (item.hidden) {
  161. return null
  162. }
  163. return this.renderItem(item)
  164. })
  165. // {...{ props, on: on }}
  166. return (
  167. <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
  168. {menuTree}
  169. </Menu>
  170. )
  171. }
  172. }