修复菜单折叠时，打开菜单子项弹出问题

chenghx

2018-08-01 945b98f3359ecbfd4712b92e7fae67b29a8df5a9

修复菜单折叠时，打开菜单子项弹出问题

 src/components/chart/Radar.vue

New file
@@ -0,0 +1,83 @@
<template>
    <v-chart>
      <v-tooltip :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale" />
      <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
      <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
      <v-legend dataKey="user" marker="circle" :offset="30" />
      <v-coord type="polar" radius="0.8" />
      <v-line position="item*score" color="user" :size="2" />
      <v-point position="item*score" color="user" :size="4" shape="circle" />
    </v-chart>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { item: 'Design', a: 70, b: 30 },
  { item: 'Development', a: 60, b: 70 },
  { item: 'Marketing', a: 50, b: 60 },
  { item: 'Users', a: 40, b: 50 },
  { item: 'Test', a: 60, b: 70 },
  { item: 'Language', a: 70, b: 50 },
  { item: 'Technology', a: 50, b: 40 },
  { item: 'Support', a: 30, b: 40 },
  { item: 'Sales', a: 60, b: 40 },
  { item: 'UX', a: 50, b: 60 }
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['a', 'b'],
  key: 'user',
  value: 'score'
})

const scale = [{
  dataKey: 'score',
  min: 0,
  max: 80
}]

const data = dv.rows

const axis1Opts = {
  dataKey: 'item',
  line: null,
  tickLine: null,
  grid: {
    lineStyle: {
      lineDash: null
    },
    hideFirstLine: false
  }
}
const axis2Opts = {
  dataKey: 'score',
  line: null,
  tickLine: null,
  grid: {
    type: 'polygon',
    lineStyle: {
      lineDash: null
    }
  }
}

export default {
  name: 'Radar',
  data () {
    return {
      data,
      axis1Opts,
      axis2Opts,
      scale
    }
  }
}
</script>

<style scoped>

</style>

 src/components/dashboard/WorkPlace.vue

@@ -70,7 +70,9 @@
            </div>
          </a-card>
          <a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div style="min-height: 400px;"></div>
            <div style="min-height: 400px;">
              <radar />
            </div>
          </a-card>
          <a-card title="团队" :bordered="false">
            <a-row>
@@ -102,12 +104,14 @@
import AListItem from 'vue-antd-ui/es/list/Item'
import AButton from 'vue-antd-ui/es/button/button'
import AIcon from 'vue-antd-ui/es/icon/icon'
import Radar from '../chart/Radar'

const AListItemMeta = AListItem.Meta

export default {
  name: 'WorkPlace',
  components: {
    Radar,
    AIcon,
    AButton,
    AListItemMeta,

 src/components/layout/GloablLayout.vue

@@ -7,7 +7,7 @@
          <h1>Vue Ant Pro</h1>
        </a>
      </div>
      <i-menu :menuData="menuData" />
      <i-menu :collapsed="collapsed" :menuData="menuData" />
    </a-layout-sider>
    <a-layout>
      <gloabl-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>

 src/components/menu/menu.js

@@ -42,6 +42,11 @@
      type: String,
      required: false,
      default: 'inline'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
@@ -50,6 +55,13 @@
      openKeys: []
    }
  },
  watch: {
    collapsed (val) {
      if (val) {
        this.openKeys = []
      }
    }
  },
  methods: {
    renderIcon: function (h, icon) {
      return icon === 'none' ? null

 src/main.js

@@ -6,7 +6,7 @@
import 'vue-antd-ui/dist/antd.css'
import Viser from 'viser-vue'
import axios from 'axios'
import '@/mock/index'
import '@/mock'

Vue.prototype.$axios = axios
Vue.config.productionTip = false

 src/router/index.js

@@ -18,6 +18,7 @@
import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList'
import WorkPlace from '@/components/dashboard/WorkPlace'
import Radar from '@/components/chart/Radar'

Vue.use(Router)

@@ -120,7 +121,7 @@
          path: '/detail/basic',
          name: '基础详情页',
          icon: 'none',
          component: NotFound
          component: Radar
        },
        {
          path: '/detail/advanced',