From 94819581198e8ace17cd106cc2a2b18a91a6d596 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 24 Oct 2018 19:20:14 +0800
Subject: [PATCH] docs: add single file recursive menu demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 12 +++
 components/menu/demo/SubMenu.vue              | 12 +++
 components/menu/demo/index.vue                |  2 +
 components/menu/demo/template.md              | 75 +++++++++++++++++++
 4 files changed, 101 insertions(+)
 create mode 100644 components/menu/demo/SubMenu.vue
 create mode 100644 components/menu/demo/template.md

diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index 56bbc5729..ba9b95f7f 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -126,6 +126,18 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/menu/demo/template.md correctly 1`] = `
+<div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
+  <ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
+    <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
+    <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]">
+      <div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
+      <div></div>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
 <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
   <br> <br>
diff --git a/components/menu/demo/SubMenu.vue b/components/menu/demo/SubMenu.vue
new file mode 100644
index 000000000..a96a80482
--- /dev/null
+++ b/components/menu/demo/SubMenu.vue
@@ -0,0 +1,12 @@
+<template functional>
+  <a-sub-menu v-on="listeners" v-bind="data.attrs">
+    <span slot="title"><a-icon type="mail" /><span>{{data.attrs.menuInfo.title}}</span></span>
+    <template v-for="item in data.attrs.menuInfo.children">
+      <a-menu-item v-if="!item.children" :key="item.key">
+        <a-icon type="pie-chart" />
+        <span>{{item.title}}</span>
+      </a-menu-item>
+      <sub-menu v-else :menuInfo="item" :key="item.key"/>
+    </template>
+  </a-sub-menu>
+</template>
diff --git a/components/menu/demo/index.vue b/components/menu/demo/index.vue
index 2b0a91b6b..5dbdae551 100644
--- a/components/menu/demo/index.vue
+++ b/components/menu/demo/index.vue
@@ -5,6 +5,7 @@ import SiderCurrent from './sider-current'
 import SwitchMode from './switch-mode'
 import Theme from './theme'
 import Vertical from './vertical'
+import Template from './template'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 const md = {
@@ -35,6 +36,7 @@ export default {
         <SwitchMode />
         <Theme />
         <Vertical />
+        <Template />
         <api>
           <CN slot='cn' />
           <US/>
diff --git a/components/menu/demo/template.md b/components/menu/demo/template.md
new file mode 100644
index 000000000..81ea52016
--- /dev/null
+++ b/components/menu/demo/template.md
@@ -0,0 +1,75 @@
+<cn>
+#### 单文件递归菜单
+使用单文件方式递归生成菜单。
+因组件内部会动态更改`a-sub-menu`的属性，如果拆分成单文件，无法将属性挂载到`a-sub-menu`上，你需要自行声明属性并挂载。为了实现方便，避免了属性的声明，本示例将其声明为函数式组件，并将所有属性挂载到`a-sub-menu`上。
+</cn>
+
+<us>
+#### Single file recursive menu
+Use the single file method to recursively generate menus.
+The properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For the sake of convenience, the declaration of the `props` is avoided. This example declares it as a functional component and mounts all properties to `a-sub-menu`.
+</us>
+
+```html
+<template>
+  <div style="width: 256px">
+    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
+      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
+    </a-button>
+    <a-menu
+      :defaultSelectedKeys="['1']"
+      :defaultOpenKeys="['sub1']"
+      mode="inline"
+      theme="dark"
+      :inlineCollapsed="collapsed"
+    >
+      <template v-for="item in list">
+        <a-menu-item v-if="!item.children" :key="item.key">
+          <a-icon type="pie-chart" />
+          <span>{{item.title}}</span>
+        </a-menu-item>
+        <sub-menu v-else :menuInfo="item" :key="item.key"/>
+      </template>
+    </a-menu>
+  </div>
+</template>
+
+<script>
+/* SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue */
+import SubMenu from './SubMenu'
+export default {
+  components: {
+    'sub-menu': SubMenu,
+  },
+  data () {
+    return {
+      collapsed: false,
+      list: [
+        {
+          key: '1',
+          title: 'Option 1',
+        }, {
+          key: '2',
+          title: 'Navigation 2',
+          children: [
+            {
+              key: '2.1',
+              title: 'Navigation 3',
+              children: [
+                { key: '2.1.1',
+                  title: 'Option 2.1.1',
+                },
+              ],
+            },
+          ],
+        }],
+    }
+  },
+  methods: {
+    toggleCollapsed () {
+      this.collapsed = !this.collapsed
+    },
+  },
+}
+</script>
+```