From 7d0f6888efcf793b33fdc53cc85bf7dc1db59d55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Fri, 10 Dec 2021 21:39:09 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=E5=A4=9A=E5=B1=82=E7=BA=A7=E6=BF=80?=
 =?UTF-8?q?=E6=B4=BB=E7=9A=84=E5=AD=90=E8=8A=82=E7=82=B9=E5=88=A4=E6=96=AD?=
 =?UTF-8?q?bugfix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-menu.tsx    | 20 ++++++++-----------
 .../devui/accordion/src/accordion.tsx         |  2 --
 .../docs/components/accordion/index.md        | 13 ++++++------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 58e5f479..39fd29e1 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -45,30 +45,26 @@ export default defineComponent({
     let deepValue = deepth.value
 
     const toggle = (itemEvent: AccordionMenuToggleEvent) => {
-      if (!itemEvent.open && children.value && children.value.some((i) => i.active)) {
-        itemEvent.item.active = true
-      } else {
-        itemEvent.item.active = null
-      }
       accordionCtx.menuToggleFn(itemEvent)
     }
 
     const hasActiveChildren = (item) => {
-      if(item.active === true) return true
-      if(item.children) {
-        return getActive(item.children)
+      if(item[activeKey.value] === true) return true
+      if(item[childrenKey.value]) {
+        return hasChildActive(item[childrenKey.value])
       }
     }
-    const getActive = (arr) => {
+    const hasChildActive = (arr) => {
       let flag = false
       if(!arr.length) return false
       for(let i=0;i<arr.length;i++){
-        if(arr[i].active === true) {
+        if(arr[i][activeKey.value] === true) {
           flag = true
           break
         }
-        if(arr[i].children) {
-          flag = getActive(arr[i].children)
+        if(arr[i][childrenKey.value]) {
+          flag = hasChildActive(arr[i][childrenKey.value])
+          if (flag) break
         }
       }
       return flag
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index 9a878ce3..e9b21b77 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -88,7 +88,6 @@ export default defineComponent({
 
     // 点击了可点击菜单
     const itemClickFn = (itemEvent: AccordionItemClickEvent) => {
-      data.value.forEach((item) => (item[activeKey.value] = null))
       const prevActiveItem = clickActiveItem
       activeItemFn(itemEvent.item)
       emit('itemClick', { ...itemEvent, prevActiveItem: prevActiveItem })
@@ -127,7 +126,6 @@ export default defineComponent({
     watch(
       () => autoOpenActiveMenu.value,
       (current, preV) => {
-        console.log('current', current)
         if (current && preV === false) {
           cleanOpenData()
         }
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 033d726a..6fad9c2b 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -17,6 +17,7 @@
             :restrictOneOpen="restrictOneOpen"
             @itemClick="itemClick"
             @menuToggle="menuToggle"
+            childrenKey="sub"
         >
             <template #loadingTemplate={item,deepth}>
                 <li class='devui-accordion-item'>
@@ -56,14 +57,14 @@ export default defineComponent({
         const accordionTypeEmbed = ref(false)
         const menu = ref([{
             title: 'Content 1',
-            children: [
+            sub: [
             {title: 'Child Content 1'},
             {title: 'Child Content 2'},
             {title: 'Child Content '},
             ]
         }, {
             title: 'Content 2（This is a long sentence for option display.）',
-            children: [
+            sub: [
             {title: 'Child Content 1 (This is a long sentence for option display.)'},
             {title: 'Child Content 2'},
             {title: 'Child Content 3'},
@@ -71,24 +72,24 @@ export default defineComponent({
         }, {
             title: 'Content 3 (Default Open)',
             open: true,
-            children: [
+            sub: [
             {title: 'Child Content 1 (Disabled)', disabled: true},
             {title: 'Child Content 2 (Default Active)', active: true},
             {title: 'Child Content 3'},
             ]
         }, {
             title: 'Content 4 (No Child)',
-            children: []
+            sub: []
         }, {
             title: 'Content 5 (Disabled)',
             disabled: true,
-            children: [
+            sub: [
             ]
         }, {
             title: 'Content 6 (Dynamic Content)',
             needLoadChildren: true,
             loading: false,
-            children: [
+            sub: [
             ]
         }])
 
-- 
Gitee


From b645df0cc747e3aed5745b56c32380506eca3212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Fri, 10 Dec 2021 23:22:46 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E6=8F=92?=
 =?UTF-8?q?=E6=A7=BD=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  5 +--
 .../devui/accordion/src/accordion-list.tsx    | 18 ++++++----
 .../devui/accordion/src/accordion-menu.tsx    | 34 ++++++++-----------
 .../devui/accordion/src/accordion-types.ts    | 10 +++---
 .../docs/components/accordion/index.md        | 26 +++++---------
 5 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index 92e00773..14e98c7a 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -25,6 +25,7 @@ export default defineComponent({
       titleKey,
       activeKey,
       disabledKey,
+      itemTemplate
     } = toRefs(props)
 
     const rootSlots = getRootSlots()
@@ -77,8 +78,8 @@ export default defineComponent({
               class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
               style={{ left: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!rootSlots.itemTemplate && <>{title.value}</>}
-            {rootSlots.itemTemplate &&
+            {(!rootSlots.itemTemplate || itemTemplate.value === false) && <>{title.value}</>}
+            {rootSlots.itemTemplate && itemTemplate.value !== false &&
               rootSlots.itemTemplate?.({
                 parent: parentValue,
                 deepth: deepValue,
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index f5e665a6..48520549 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -43,7 +43,10 @@ export default defineComponent({
       linkType,
       showNoContent,
       loadingKey,
-      titleKey
+      titleKey,
+      loadingTemplate,
+      noContentTemplate,
+      innerListTemplate
     } = toRefs(props)
 
     let parentValue = parent.value
@@ -64,7 +67,7 @@ export default defineComponent({
     return () => {
       return (
         <>
-          {(!rootSlots.innerListTemplate || deepth.value === 0) && (
+          {(!rootSlots.innerListTemplate || deepth.value === 0 || innerListTemplate.value === false) && (
             <ul class={['devui-accordion-list']} {...attrs}>
               {data.value.map((item) => {
                 return (
@@ -100,6 +103,7 @@ export default defineComponent({
             </ul>
           )}
           {rootSlots.innerListTemplate &&
+            innerListTemplate.value !== false &&
             deepValue !== 0 &&
             rootSlots.innerListTemplate?.({
               item: parentValue,
@@ -107,12 +111,12 @@ export default defineComponent({
               itemClickFn: accordionCtx.itemClickFn,
               menuToggleFn: accordionCtx.menuToggleFn
             })}
-          {!rootSlots.innerListTemplate &&
+          {(!rootSlots.innerListTemplate || innerListTemplate.value === false) &&
             (loading.value || (noContent.value && showNoContent.value)) && (
               <ul class={['devui-accordion-list']} {...attrs}>
                 {
                   // 加载中
-                  loading.value && !rootSlots.loadingTemplate && (
+                  loading.value && (!rootSlots.loadingTemplate || loadingTemplate.value === false) && (
                     <li class='devui-accordion-item'>
                       <div
                         class={['devui-accordion-item-title', 'devui-over-flow-ellipsis']}
@@ -126,7 +130,8 @@ export default defineComponent({
                 {
                   // 自定义加载
                   loading.value &&
-                    rootSlots.loadingTemplate &&
+                    rootSlots.loadingTemplate && 
+                    loadingTemplate.value !== false &&
                     rootSlots.loadingTemplate?.({
                       item: parentValue,
                       deepth: deepValue
@@ -137,7 +142,7 @@ export default defineComponent({
                   showNoContent.value &&
                     !loading.value &&
                     noContent.value &&
-                    !rootSlots.noContentTemplate && (
+                    (!rootSlots.noContentTemplate || noContentTemplate.value === false) && (
                       <li class='devui-accordion-item'>
                         <div
                           class={[
@@ -157,6 +162,7 @@ export default defineComponent({
                     !loading.value &&
                     noContent.value &&
                     rootSlots.noContentTemplate &&
+                    noContentTemplate.value !== false &&
                     rootSlots.noContentTemplate?.({
                       item: parentValue,
                       deepth: deepValue
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 39fd29e1..a2ca212a 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -1,12 +1,9 @@
 import { computed, defineComponent, toRefs, inject } from 'vue'
-import {
-  AccordionMenuItem,
-  AccordionMenuToggleEvent
-} from './accordion.type'
+import { AccordionMenuItem, AccordionMenuToggleEvent } from './accordion.type'
 import AccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
-import { flatten, getRootSlots } from '../src/utils'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -35,7 +32,8 @@ export default defineComponent({
       autoOpenActiveMenu,
       disabledKey,
       childrenKey,
-      titleKey
+      titleKey,
+      menuItemTemplate
     } = toRefs(props)
 
     const rootSlots = getRootSlots()
@@ -49,20 +47,20 @@ export default defineComponent({
     }
 
     const hasActiveChildren = (item) => {
-      if(item[activeKey.value] === true) return true
-      if(item[childrenKey.value]) {
+      if (item[activeKey.value] === true) return true
+      if (item[childrenKey.value]) {
         return hasChildActive(item[childrenKey.value])
       }
     }
     const hasChildActive = (arr) => {
       let flag = false
-      if(!arr.length) return false
-      for(let i=0;i<arr.length;i++){
-        if(arr[i][activeKey.value] === true) {
+      if (!arr.length) return false
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i][activeKey.value] === true) {
           flag = true
           break
         }
-        if(arr[i][childrenKey.value]) {
+        if (arr[i][childrenKey.value]) {
           flag = hasChildActive(arr[i][childrenKey.value])
           if (flag) break
         }
@@ -82,16 +80,13 @@ export default defineComponent({
     const children = computed(() => {
       return item.value && item.value[childrenKey.value]
     })
-    const active = computed(() => {
-      return item.value && item.value[activeKey.value]
-    })
-    
+
     const childActived = computed(() => {
       return hasActiveChildren(item.value)
     })
 
     const open = computed(() => {
-      return (keyOpen.value === undefined && autoOpenActiveMenu.value)
+      return keyOpen.value === undefined && autoOpenActiveMenu.value
         ? childActived.value
         : keyOpen.value
     })
@@ -123,15 +118,16 @@ export default defineComponent({
               class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
               style={{ left: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!rootSlots.menuItemTemplate && <>{title.value}</>}
+            {(!rootSlots.menuItemTemplate || menuItemTemplate.value === false) && <>{title.value}</>}
             {rootSlots.menuItemTemplate &&
+              menuItemTemplate.value !== false &&
               rootSlots.menuItemTemplate?.({
                 parent: parentValue,
                 deepth: deepValue,
                 item: item.value
               })}
             <span class='devui-accordion-open-icon'>
-              <OpenIcon></OpenIcon>
+              <OpenIcon />
             </span>
           </div>
           <div
diff --git a/packages/devui-vue/devui/accordion/src/accordion-types.ts b/packages/devui-vue/devui/accordion/src/accordion-types.ts
index b64c0445..2aa7396c 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-types.ts
+++ b/packages/devui-vue/devui/accordion/src/accordion-types.ts
@@ -15,8 +15,8 @@ export const accordionProps = {
 	openKey: { type: String, default: "open" }, // 菜单是否打开
 
 	/* 菜单模板 */
-	menuItemTemplate: { type: String, default: "" }, // 可展开菜单内容条模板
-	itemTemplate: { type: String, default: "" }, // 可点击菜单内容条模板
+	menuItemTemplate: { type: Boolean, default: true }, // 可展开菜单内容条模板
+	itemTemplate: { type: Boolean, default: true }, // 可点击菜单内容条模板
 
 	menuToggle: {
 		type: Function as unknown as () => (event: MouseEvent) => void,
@@ -35,9 +35,9 @@ export const accordionProps = {
 	restrictOneOpen: { type: Boolean, default: false }, // 限制一级菜单同时只能打开一个
 	autoOpenActiveMenu: { type: Boolean, default: false }, // 自动展开活跃菜单
 	showNoContent: { type: Boolean, default: true }, // 没有内容的时候是否显示没有数据
-	noContentTemplate: { type: String, default: "" }, // 没有内容的时候使用自定义模板
-	loadingTemplate: { type: String, default: "" }, // 加载中使用自定义模板
-	innerListTemplate: { type: String, default: "" }, // 可折叠菜单内容完全自定义，用做折叠面板
+	noContentTemplate: { type: Boolean, default: true }, // 没有内容的时候使用自定义模板
+	loadingTemplate: { type: Boolean, default: true }, // 加载中使用自定义模板
+	innerListTemplate: { type: Boolean, default: true }, // 可折叠菜单内容完全自定义，用做折叠面板
 
 	/* 内置路由/链接/动态判断路由或链接类型 */
 	linkType: {
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 6fad9c2b..b76e6a6e 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -17,7 +17,7 @@
             :restrictOneOpen="restrictOneOpen"
             @itemClick="itemClick"
             @menuToggle="menuToggle"
-            childrenKey="sub"
+            :loadingTemplate="false"
         >
             <template #loadingTemplate={item,deepth}>
                 <li class='devui-accordion-item'>
@@ -25,17 +25,7 @@
                         class="devui-accordion-item-title devui-over-flow-ellipsis"
                         style="{{ textIndent: deepth * 20 + 'px' }}"
                     >
-                        我是自定义加载...
-                    </div>
-                </li>
-            </template>
-            <template #noContentTemplate={item,deepth}>
-                <li class='devui-accordion-item'>
-                    <div
-                        class="devui-accordion-item-title devui-over-flow-ellipsis disabled"
-                        style="{{ textIndent: deepth * 20 + 'px' }}"
-                    >
-                        我是无数据模板
+                        自定义加载...
                     </div>
                 </li>
             </template>
@@ -57,14 +47,14 @@ export default defineComponent({
         const accordionTypeEmbed = ref(false)
         const menu = ref([{
             title: 'Content 1',
-            sub: [
+            children: [
             {title: 'Child Content 1'},
             {title: 'Child Content 2'},
             {title: 'Child Content '},
             ]
         }, {
             title: 'Content 2（This is a long sentence for option display.）',
-            sub: [
+            children: [
             {title: 'Child Content 1 (This is a long sentence for option display.)'},
             {title: 'Child Content 2'},
             {title: 'Child Content 3'},
@@ -72,24 +62,24 @@ export default defineComponent({
         }, {
             title: 'Content 3 (Default Open)',
             open: true,
-            sub: [
+            children: [
             {title: 'Child Content 1 (Disabled)', disabled: true},
             {title: 'Child Content 2 (Default Active)', active: true},
             {title: 'Child Content 3'},
             ]
         }, {
             title: 'Content 4 (No Child)',
-            sub: []
+            children: []
         }, {
             title: 'Content 5 (Disabled)',
             disabled: true,
-            sub: [
+            children: [
             ]
         }, {
             title: 'Content 6 (Dynamic Content)',
             needLoadChildren: true,
             loading: false,
-            sub: [
+            children: [
             ]
         }])
 
-- 
Gitee


From 214e49e84dddb63c523afc2ebbcc502c94d6b24b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Sat, 11 Dec 2021 00:38:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0api=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/accordion/index.md        | 269 +++++++++++++++++-
 1 file changed, 268 insertions(+), 1 deletion(-)

diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index b76e6a6e..e30dc384 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -579,4 +579,271 @@ export default defineComponent({
   }
 }
 </style>
-```
\ No newline at end of file
+```
+
+:::
+### API
+
+|        参数        |       类型       |    默认    |                      说明                                                                                                                  | 跳转 Demo                     | 
+| :--------: | :-------: | :-------------------: | :--------: | :------------------------------------: |
+|  data  |  `Array<any> \| AccordionMenuType`  |     --     |                                                                                     必选，数据源，可以自定义数组或者使用预设的`AccordionMenuType`                                                                                      | [基本用法](#基本用法)                                   |
+|      titleKey      |    `string`      |  'title'   |                                                                                    可选，标题的属性名，item[titleKey]类型为`string`，为标题显示内容                                                                                    | [改变键值](#改变键值)                                 |
+|     loadingKey     |      `string`        | 'loading'  |                                                                                  可选，子菜单是否加载中的判断属性名，item[loadingKey]类型为`boolean`                                                                                   | [改变键值](#改变键值)                                 |
+|    childrenKey     |     `string`     | 'children' |                                                                                       可选，子菜单的属性名，item[childrenKey]类型为`Array<any>`                                                                                        | [改变键值](#改变键值)                                 |
+|    disabledKey     |      `string`      | 'disabled' |                                                                                        可选，是否禁用的属性名，item[disabledKey]类型为`boolean`                                                                                        | [改变键值](#改变键值)                                 |
+|     activeKey      |      `string`        |  'active'  |                                                                                      可选，子菜单是否激活的属性名，item[activeKey]类型为`boolean`                                                                                      | [改变键值](#改变键值)                                 |
+|      openKey       |     `string`        |   'open'   |                                                                                        可选，菜单是否展开的属性名，item[openKey]类型为`boolean`                                                                                        | [改变键值](#改变键值)                                 |
+|  restrictOneOpen   |    `boolean`      |   false    |                                                                                            可选，限制一级菜单同时只能打开一个， 默认不限制                                                                                             | [基本用法](#基本用法)                                   |
+|  menuItemTemplate  |   `boolean`  |    true    |                                                                                              可选， 可展开菜单内容条模板，可用变量值见下                                                                                               | [使用模板](#使用模板)                               |
+|    itemTemplate    |    `boolean`     |    true    |                                                                                               可选，可点击菜单内容条模板，可用变量值见下                                                                                               | [使用模板](#使用模板)                               |
+| noContentTemplate  |     `boolean`    |    true    |                                                                                           可选，没有内容的时候使用自定义模板，可用变量值见下                                                                                           | [使用模板](#使用模板)                               |
+|  loadingTemplate   |     `boolean`     |    true    |                                                                                               可选，加载中使用自定义模板，可用变量值见下                                                                                               | [使用模板](#使用模板)                               |
+| innerListTemplate  |    `boolean`     |    true    |                                                                                        可选，子列表内容完全自定义，用做折叠面板，可用变量值见下                                                                                        | [使用模板](#使用模板)                               |
+|      linkType      |`'routerLink'\|'hrefLink'\|'dependOnLinkTypeKey'\|''`|     ''     |             可选，`'routerLink'`为路由场景；`'hrefLink'`为外部链接场景；`'dependOnLinkTypeKey'`为动态路由或外部链接场景；`''`为默认非链接类型（无法右键打开新标签页）                                        | [内置路由和链接类型](#内置路由和链接类型) |
+|    linkTypeKey     |                       `string`                        | 'linkType' | 可选，链接内容的类型的 key 值，用于 linkType 为`'dependOnLinkTypeKey'`时指定对象链接类型属性名，item[linkTypeKey]类型为`'routerLink'\|'hrefLink'\| string`，其中`'routerLink'`为路由链接，`'hrefLink'`为外部链接，其他为默认非链接类型 |
+|      linkKey       |                       `string`                        |   'link'   |                                                          可选，链接内容的 key，用于 linkType 为连接类型记非`''`时，链接的取值的属性值，item[linkKey]为路由地址或者超链接地址                                                           |
+|   linkTargetKey    |                       `string`                        |  'target'  |                                                                            可选，链接目标窗口的 key，用于链接类型，item[linkTargetKey]为单个链接的目标窗口                                                                             |
+| linkDefaultTarget  |                       `string`                        |  '\_self'  |                                                                   可选，不设置 target 的时候 target 默认值为`'_self'`，用于链接类型, 取值等同于 a 链接的 target 属性                                                                   | [内置路由和链接类型](#内置路由和链接类型) |
+| autoOpenActiveMenu |                       `boolean`                       |   false    |                                                                                                  可选，是否自动展开带有活跃子项的菜单                                                                                                  | [复合层级和自动展开](#复合层级和自动展开)      |
+|   accordionType    |                  `'normal'\|'embed'`                  |  'normal'  |                                                                                           可选，菜单形式是普通（带阴影）还是内嵌（不带阴影）                                                                                           | [基本用法](#基本用法)                                   |
+|   showAnimation    |    `boolean`                  |           true         |   可选，是否展示动画         | [内置路由和链接类型](#内置路由和链接类型)   | ✔ |
+
+
+### d-accordion 事件
+
+|       事件       |                                   类型                                    |                                                                            说明                                                                            | 跳转 Demo                    |
+| :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- |
+|    menuToggle    | `EventEmitter<`[`AccordionMenuToggleEvent`](#accordionmenutoggleevent)`>` | 可选，可展开菜单展开事件，返回对象里属性 item 为点击的对象数据，open 为 true 则将要展开 false 则将要关闭， parent 为父对象数据，event 为点击事件的原生事件 | [基本用法](#基本用法) |
+|    itemClick     |  `EventEmitter<`[`AccordionItemClickEvent`](#accordionitemclickevent)`>`  |     可选，可点击菜单点击事件，返回对象里属性 item 为点击的对象数据，preActive 对象为上一次展开的对象， parent 为父对象数据，event 为点击事件的原生事件     | [基本用法](#基本用法) |
+| activeItemChange |                            `EventEmitter<any>`                            |                                                        可选，子项切换的时候会发出新激活的子项的数据                                                        | [基本用法](demo#basic-usage) |
+
+### Accordion类型定义
+
+```typescript
+/* 基础数据类型 */
+type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string;
+export interface AccordionBase {
+  title: string
+  disabled?: boolean
+  [prop: string]: any
+}
+interface IAccordionActiveable {
+  active?: boolean
+}
+interface IAccordionFoldable<T> {
+  open?: boolean
+  loading?: boolean
+  children?: Array<T>
+}
+
+interface IAccordionLinkable {
+  link?: string
+  target?: boolean
+  linkType?: AccordionMenuItemLinkType
+}
+export interface AccordionBaseItem
+  extends AccordionBase,
+  IAccordionActiveable {
+}
+export interface AccordionBaseMenu<T>
+  extends AccordionBase,
+  IAccordionFoldable<T> {
+}
+
+export interface AccordionLinkableItem
+  extends AccordionBase,
+  IAccordionActiveable,
+  IAccordionLinkable {
+}
+export interface AccordionMenuItem
+  extends AccordionBase,
+  IAccordionActiveable,
+  IAccordionFoldable<AccordionMenuItem>,
+  IAccordionLinkable {
+}
+
+export type AccordionMenuType = Array<AccordionMenuItem>;
+
+/* 基础事件类型 */
+export interface AccordionMenuToggleEvent {
+  item: any
+  open: boolean
+  parent: any
+  event: MouseEvent
+}
+export interface AccordionItemClickEvent {
+  item: any
+  prevActiveItem?: any
+  parent: any
+  event: MouseEvent
+}
+
+/* 废弃接口 */
+/** @deprecated  merge into `AccordionMenuItem`*/
+export interface AccordionSubMenuItem {
+  title: string
+  active?: boolean
+  disabled?: boolean
+  [prop: string]: any
+}
+/** @deprecated  use `AccordionLinkableItem` instead*/
+export interface AccordionSubMenuItemHrefLink {
+  title: string
+  link: string
+  target?: string
+  active?: boolean
+  disabled?: boolean
+  [prop: string]: any
+}
+/** @deprecated  use `AccordionLinkableItem` instead*/
+export interface AccordionSubMenuItemRouterLink {
+  title: string
+  link: string
+  target?: string
+  active?: boolean
+  disabled?: boolean
+  [prop: string]: any
+}
+/** @deprecated  use `AccordionLinkableItem` instead*/
+export interface AccordionSubMenuItemDynamicLink {
+  title: string
+  link: string
+  linkType: 'routerLink' | 'hrefLink' | string
+  target?: string
+  active?: boolean
+  disabled?: boolean
+  [prop: string]: any
+}
+```
+
+### AccordionProps
+
+``` typescript
+import { ExtractPropTypes } from "vue";
+import { AccordionMenuType } from "./accordion.type";
+
+export const accordionProps = {
+	data: {
+		type: Array as () => Array<any> | AccordionMenuType,
+		default: null,
+	},
+	/* Key值定义, 用于自定义数据结构 */
+	titleKey: { type: String, default: "title" }, // 标题的key，item[titleKey]类型为string，为标题显示内容
+	loadingKey: { type: String, default: "loading" }, // 子菜单动态加载item[loadingKey]类型为boolean
+	childrenKey: { type: String, default: "children" }, // 子菜单Key
+	disabledKey: { type: String, default: "disabled" }, // 是否禁用Key
+	activeKey: { type: String, default: "active" }, // 菜单是否激活/选中
+	openKey: { type: String, default: "open" }, // 菜单是否打开
+
+	/* 菜单模板 */
+	menuItemTemplate: { type: Boolean, default: true }, // 可展开菜单内容条模板
+	itemTemplate: { type: Boolean, default: true }, // 可点击菜单内容条模板
+
+	menuToggle: {
+		type: Function as unknown as () => (event: MouseEvent) => void,
+		default: null,
+	}, // 可展开菜单展开事件
+	itemClick: {
+		type: Function as unknown as () => (event: MouseEvent) => void,
+		default: null,
+	}, // 可点击菜单点击事件
+	activeItemChange: {
+		type: Function as unknown as () => (event: MouseEvent) => void,
+		default: null,
+	},
+
+	/** 高级选项和模板 */
+	restrictOneOpen: { type: Boolean, default: false }, // 限制一级菜单同时只能打开一个
+	autoOpenActiveMenu: { type: Boolean, default: false }, // 自动展开活跃菜单
+	showNoContent: { type: Boolean, default: true }, // 没有内容的时候是否显示没有数据
+	noContentTemplate: { type: Boolean, default: true }, // 没有内容的时候使用自定义模板
+	loadingTemplate: { type: Boolean, default: true }, // 加载中使用自定义模板
+	innerListTemplate: { type: Boolean, default: true }, // 可折叠菜单内容完全自定义，用做折叠面板
+
+	/* 内置路由/链接/动态判断路由或链接类型 */
+	linkType: {
+		type: String as () =>
+			| "routerLink"
+			| "hrefLink"
+			| "dependOnLinkTypeKey"
+			| ""
+			| string,
+		default: "",
+	},
+	linkTypeKey: { type: String, default: "linkType" }, // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区
+	linkKey: { type: String, default: "link" }, // 链接内容的key
+	linkTargetKey: { type: String, default: "target" }, // 链接目标窗口的key
+	linkDefaultTarget: { type: String, default: "_self" }, // 不设置target的时候target默认值
+
+	accordionType: {
+		type: String as () => "normal" | "embed",
+		default: "normal",
+	},
+} as const;
+
+export type AccordionProps = ExtractPropTypes<typeof accordionProps>;
+
+```
+
+### 模板可以用变量值(使用方法如下)
+
+```html
+<template #templateName={item}>
+   {{item}}
+</template>
+```
+
+### menuItemTemplate 可用变量值
+
+|        变量        |    类型    |                   变量含义说明                    |
+| :----------------: | :--------: | :-----------------------------------------------: |
+|        item        |   `any`    |                可展开类型菜单数据                 |
+|       deepth       |  `number`  |                 表示嵌套结构层级                  |
+|       parent       |   `any`    |                 所属父级菜单数据                  |
+|   ~~~titleKey~~~   |  `string`  |        `已经废弃`~~~组件的 titleKey 值~~~         |
+| ~~~disabledKey~~~  |  `string`  |       `已经废弃`~~~组件的 disabledKey 值~~~       |
+|   ~~~openKey~~~    |  `string`  |         `已经废弃`~~~组件的 openKey 值~~~         |
+| ~~~menuToggleFn~~~ | `Function` | `已经废弃`~~~参数应为 item，表示一级菜单被点击~~~ |
+
+### itemTemplate 可用变量值
+
+|       变量        |    类型    |                   变量含义说明                    |
+| :---------------: | :--------: | :-----------------------------------------------: |
+|       item        |   `any`    |                可点击类型菜单数据                 |
+|      deepth       |  `number`  |                值表示嵌套结构层级                 |
+|      parent       |   `any`    |                 所属父级菜单数据                  |
+|  ~~~titleKey~~~   |  `string`  |        `已经废弃`~~~ 组件的 titleKey 值~~~        |
+| ~~~disabledKey~~~ |  `string`  |      `已经废弃`~~~ 组件的 disabledKey 值~~~       |
+|  ~~~activeKey~~~  |  `string`  |       `已经废弃`~~~ 组件的 activeKey 值~~~        |
+| ~~~itemClickFn~~~ | `Function` | `已经废弃`~~~参数应为 item，表示二级菜单被点击~~~ |
+
+### noContentTemplate 可用变量值
+
+|  变量  |   类型   |    变量含义说明    |
+| :----: | :------: | :----------------: |
+|  item  |  `any`   |  父级菜单单个数据  |
+| deepth | `number` | 值表示嵌套结构层级 |
+
+### loadingTemplate 可用变量值
+
+|       变量       |   类型   |        变量含义说明        |
+| :--------------: | :------: | :------------------------: |
+|       item       |  `any`   |      父级菜单单个数据      |
+|      deepth      | `number` |     值表示嵌套结构层级     |
+| ~~~loadingKey~~~ | `string` | ~~~组件的 loadingKey 值~~~ |
+
+### innerListTemplate 可用变量值
+
+|       变量        |    类型    |                            变量含义说明                            |
+| :---------------: | :--------: | :----------------------------------------------------------------: |
+|       item        |   `any`    |                          父级菜单单个数据                          |
+|      deepth       |  `number`  |                         值表示嵌套结构层级                         |
+|  ~~~titleKey~~~   |  `string`  |                 `已经废弃`~~~组件的 titleKey 值~~~                 |
+| ~~~loadingKey~~~  |  `string`  |                `已经废弃`~~~组件的 loadingKey 值~~~                |
+| ~~~childrenKey~~~ |  `string`  |               `已经废弃`~~~组件的 childrenKey 值~~~                |
+| ~~~disabledKey~~~ |  `string`  |               `已经废弃`~~~组件的 disabledKey 值~~~                |
+|   ~~~openKey~~~   |  `string`  |                 `已经废弃`~~~组件的 openKey 值~~~                  |
+|  ~~~activeKey~~~  |  `string`  |          `已经废弃`~~~组件的 activeKey 值，用二级菜单~~~           |
+|   menuToggleFn    | `Function` |      参数应为 item，表示菜单被展开，可选参数 event，原始事件       |
+|    itemClickFn    | `Function` | 参数应为可点击菜单的 item，表示菜单被点击,可选参数 event，原始事件 |
+
-- 
Gitee


From 8ea91fac717b197b0c965f669942090edf10e1d2 Mon Sep 17 00:00:00 2001
From: kevinawe <yc2hangycz@gmail.com>
Date: Sat, 11 Dec 2021 22:00:33 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20md=E6=96=87=E6=A1=A3=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=98=B2=E6=AD=A2=E5=85=A8=E5=B1=80=E6=B1=A1=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/accordion/index.md        | 81 +++++++------------
 1 file changed, 30 insertions(+), 51 deletions(-)

diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index e30dc384..7c6aac8a 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -10,7 +10,7 @@
 
 ```vue
 <template>
-    <div class="menu">
+    <div class="basic-menu">
         <d-accordion
             :data="menu"
             :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
@@ -32,10 +32,10 @@
         </d-accordion>
     </div>
     
-    <div class="option">
+    <div class="basic-option">
         <d-switch v-model:checked="restrictOneOpen"></d-switch> Only one level-1 menu can be expanded.<!--限制只能展开一个一级菜单-->
     </div>
-    <div class="option"><d-switch v-model:checked="accordionTypeEmbed"></d-switch> Embedded menu (no shadow)<!--内嵌菜单形式（无阴影）--></div>
+    <div class="basic-option"><d-switch v-model:checked="accordionTypeEmbed"></d-switch> Embedded menu (no shadow)<!--内嵌菜单形式（无阴影）--></div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
@@ -112,23 +112,23 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.menu {
+.basic-menu {
   width: 200px;
 }
 
-.option {
+.basic-option {
   line-height: 20px;
   vertical-align: middle;
   margin-top: 20px;
 }
 
-.option > d-toggle {
+.basic-option > d-toggle {
   display: inline-block;
   transform: translateY(3px);
 }
 
 @media (max-width: 250px) {
-  .menu {
+  .basic-menu {
     width: 80%;
   }
 }
@@ -150,7 +150,7 @@ ul {
 
 ```vue
 <template>
-    <div class="menu">
+    <div class="use-template-menu">
         <d-accordion
             :data="menu"
             :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
@@ -160,7 +160,7 @@ ul {
         >
             <template #menuItemTemplate={item,deepth,parent}>
                 {{ item.title }}
-                <span class="badge" v-if="item.children?.length">{{ item.children.length }}</span>
+                <span class="use-template-badge" v-if="item.children?.length">{{ item.children.length }}</span>
                 <span class="operation-clear" v-if="item.needLoadChildren === false" @click="clearChildrenData($event, item)">
                     reset
                     <!--重置-->
@@ -168,7 +168,7 @@ ul {
             </template>
             <template #itemTemplate={item,deepth,parent}>
                 {{ item.title }}
-                <span class="info">(Click Count: {{ item.clicktimes || '0' }})</span>
+                <span class="use-template-info">(Click Count: {{ item.clicktimes || '0' }})</span>
             </template>
             <template #noContentTemplate={deepth}>
                 <li class="devui-accordion-item disabled">
@@ -180,7 +180,7 @@ ul {
             </template>
             <template #loadingTemplate={item}>
                 <li class="devui-accordion-item">
-                    <div class="loading"><span class="circle-spinner"></span> loading...<!--正在用力地加载中...--></div>
+                    <div class="use-template-loading"><span class="use-template-circle-spinner"></span> loading...<!--正在用力地加载中...--></div>
                 </li>
             </template>
         </d-accordion>
@@ -269,11 +269,11 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.menu {
+.use-template-menu {
   width: 400px;
 }
 
-.badge {
+.use-template-badge {
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -286,13 +286,13 @@ export default defineComponent({
   font-weight: normal;
 }
 
-.loading {
+.use-template-loading {
   position: relative;
   line-height: 40px;
   padding-left: 64px;
 }
 
-.circle-spinner {
+.use-template-circle-spinner {
   top: 10px;
   left: 36px;
   position: absolute;
@@ -317,7 +317,7 @@ export default defineComponent({
 }
 
 @media (max-width: 500px) {
-  .menu {
+  .use-template-menu {
     width: 80%;
   }
 }
@@ -333,17 +333,15 @@ export default defineComponent({
 
 ```vue
 <template>
-    <div class="menu">
+    <div class="inner-template-menu">
         <d-accordion
             :data="menu"
             :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
             :restrictOneOpen="restrictOneOpen"
-            @itemClick="itemClick"
-            @menuToggle="menuToggle"
         >
             <template #innerListTemplate={item,deepth}>
                 <div 
-                    class="devui-accordion-submenu devui-accordion-show-animate my-menu"
+                    class="devui-accordion-submenu devui-accordion-show-animate inner-template-my-menu"
                 >
                     {{item.content}}
                 </div>
@@ -369,46 +367,27 @@ export default defineComponent({
             content: 'Child Content of Content 2'
         }]);
 
-        const itemClick = (event) => {
-            console.log('item click' + JSON.stringify(event));
-        }
-        const menuToggle = (event) => {
-            console.log('menu toggle' + JSON.stringify(event));
-            if (event.open && event.item.needLoadChildren) {
-                event.item.loading = true;
-                setTimeout(() => {
-                    event.item.children = [
-                        {title: 'Child Content 1'},
-                        {title: 'Child Content 2'}
-                    ];
-                    event.item.needLoadChildren = false;
-                    event.item.loading = false;
-                }, 2000);
-            }
-        }
 
         return {
             menu,
             restrictOneOpen,
             accordionTypeEmbed,
-            itemClick,
-            menuToggle
         }
     }
 })
 </script>
 <style scoped>
-.menu {
+.inner-template-menu {
   width: 400px;
 }
-.my-menu {
+.inner-template-my-menu {
   min-height: 60px;
   line-height: 40px;
   padding: 12px;
 }
 
 @media (max-width: 500px) {
-  .menu {
+  .inner-template-menu {
     width: 80%;
   }
 }
@@ -423,7 +402,7 @@ export default defineComponent({
 
 ```vue
 <template>
-    <div class="menu">
+    <div class="multi-child-menu">
         <d-accordion
             :data="menu"
             :autoOpenActiveMenu="autoOpenActiveMenu"
@@ -431,7 +410,7 @@ export default defineComponent({
         </d-accordion>
     </div>
 
-    <div class="option">
+    <div class="multi-child-option">
         <d-switch v-model:checked="autoOpenActiveMenu"></d-switch> auto expend active menu<!--自动展开激活的菜单-->
     </div>
 </template>
@@ -493,23 +472,23 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.menu {
+.multi-child-menu {
   width: 400px;
 }
 
-.option {
+.multi-child-option {
   line-height: 20px;
   vertical-align: middle;
   margin-top: 20px;
 }
 
-.option > d-toggle {
+.multi-child-option > d-toggle {
   display: inline-block;
   transform: translateY(3px);
 }
 
 @media (max-width: 500px) {
-  .menu {
+  .multi-child-menu {
     width: 80%;
   }
 }
@@ -524,7 +503,7 @@ export default defineComponent({
 
 ```vue
 <template>
-    <div class="menu">
+    <div class="change-key-menu">
         <d-accordion
             :data="menu"
             :titleKey="key?.titleKey"
@@ -569,12 +548,12 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.menu {
+.change-key-menu {
   width: 400px;
 }
 
 @media (max-width: 500px) {
-  .menu {
+  .change-key-menu {
     width: 80%;
   }
 }
-- 
Gitee