feat: add prop openKeys and event openChange for menu.js; :star2: 新增：menu.j...

iczer

2020-07-31 08e40f1a3141c2437f16cf2c3a2bfd3c647f4196

feat: add prop openKeys and event openChange for menu.js; :star2:
新增：menu.js 增加 openKeys 属性和 openChange 事件；

 src/components/menu/menu.js

@@ -22,15 +22,18 @@
 *  }
 * ]
 *
 * i18n: 国际化配置。组件默认会根据 options route配置的 path 和 name 生成英文以及中文的国际化配置，如需自定义或增加其他语言，配置
 * i18n: 国际化配置。系统默认会根据 options route配置的 path 和 name 生成英文以及中文的国际化配置，如需自定义或增加其他语言，配置
 * 此项即可。如：
 * i18n: {
 *   CN: {dashboard: {name: '监控中心'}}
 *   HK: {dashboard: {name: '監控中心'}}
 *   messages: {
 *     CN: {dashboard: {name: '监控中心'}}
 *     HK: {dashboard: {name: '監控中心'}}
 *   }
 * }
 **/
import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'
import fastEqual from 'fast-deep-equal'

const {Item, SubMenu} = Menu

@@ -56,29 +59,26 @@
      required: false,
      default: false
    },
    i18n: Object
    i18n: Object,
    openKeys: Array
  },
  data () {
    return {
      openKeys: [],
      selectedKeys: [],
      sOpenKeys: [],
      cachedOpenKeys: []
    }
  },
  computed: {
    rootSubmenuKeys: (vm) => {
      let keys = []
      vm.options.forEach(item => {
        keys.push(item.path)
      })
      return keys
    },
    menuTheme() {
      return this.theme == 'light' ? this.theme : 'dark'
    }
  },
  created () {
    this.updateMenu()
    if (!this.options[0].fullPath) {
      this.formatOptions(this.options, '')
    }
    // 自定义国际化配置
    if(this.i18n && this.i18n.messages) {
      const messages = this.i18n.messages
@@ -90,14 +90,18 @@
  watch: {
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys
        this.openKeys = []
        this.cachedOpenKeys = this.sOpenKeys
        this.sOpenKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
        this.sOpenKeys = this.cachedOpenKeys
      }
    },
    '$route': function () {
      this.updateMenu()
    },
    sOpenKeys(val) {
      this.$emit('openChange', val)
      this.$emit('update:openKeys', val)
    }
  },
  methods: {
@@ -159,32 +163,22 @@
      return menuArr
    },
    formatOptions(options, parentPath) {
      let this_ = this
      options.forEach(route => {
        let isFullPath = route.path.substring(0, 1) == '/'
        route.fullPath = isFullPath ? route.path : parentPath + '/' + route.path
        if (route.children) {
          this_.formatOptions(route.children, route.fullPath)
          this.formatOptions(route.children, route.fullPath)
        }
      })
    },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    updateMenu () {
      let routes = this.$route.matched.concat()
      const route = routes.pop()
      const menuRoutes = this.$route.matched.filter(item => item.path !== '')
      const route = menuRoutes.pop()
      this.selectedKeys = [this.getSelectedKey(route)]
      let openKeys = []
      routes.forEach((item) => {
        openKeys.push(item.path)
      })
      this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
      let openKeys = menuRoutes.map(item => item.path)
      if (!fastEqual(openKeys, this.sOpenKeys)) {
        this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
      }
    },
    getSelectedKey (route) {
      if (route.meta.invisible && route.parent) {
@@ -200,14 +194,16 @@
        props: {
          theme: this.menuTheme,
          mode: this.$props.mode,
          openKeys: this.openKeys,
          selectedKeys: this.selectedKeys
          selectedKeys: this.selectedKeys,
          openKeys: this.openKeys ? this.openKeys : this.sOpenKeys
        },
        on: {
          openChange: this.onOpenChange,
          select: (obj) => {
            this.selectedKeys = obj.selectedKeys
            this.$emit('select', obj)
          },
          'update:openKeys': (val) => {
            this.sOpenKeys = val
          }
        }
      }, this.renderMenu(h, this.options)

 src/utils/colors.js

@@ -1,5 +1,5 @@
const varyColor = require('webpack-theme-color-replacer/client/varyColor')
const generate =  require('@ant-design/colors').generate
const {generate} =  require('@ant-design/colors')
const {ADMIN, ANTD} = require('../config/default')
const Config = require('../config')