{
- 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
{
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
})
@@ -127,15 +118,16 @@ export default defineComponent({
class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
style={{ left: deepValue * 20 + 10 + 'px' }}
>
- {!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
})}
-
+
(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/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index 9a878ce36f09c849612368b8ff69a02605663a19..e9b21b77cf49d300452084d65e4e87ae61e3321e 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 033d726a4d2d286cf98064c18af565a241ea4c8d..7c6aac8aace4774a5ea6c8a479a6203703058d86 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -10,13 +10,14 @@
```vue
-
-
+
Only one level-1 menu can be expanded.
-
Embedded menu (no shadow)
+
Embedded menu (no shadow)
-```
\ No newline at end of file
+```
+
+:::
+### API
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :--------: | :-------: | :-------------------: | :--------: | :------------------------------------: |
+| data | `Array
\| AccordionMenuType` | -- | 必选，数据源，可以自定义数组或者使用预设的`AccordionMenuType` | [基本用法](#基本用法) |
+| titleKey | `string` | 'title' | 可选，标题的属性名，item[titleKey]类型为`string`，为标题显示内容 | [改变键值](#改变键值) |
+| loadingKey | `string` | 'loading' | 可选，子菜单是否加载中的判断属性名，item[loadingKey]类型为`boolean` | [改变键值](#改变键值) |
+| childrenKey | `string` | 'children' | 可选，子菜单的属性名，item[childrenKey]类型为`Array` | [改变键值](#改变键值) |
+| 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` | 可选，子项切换的时候会发出新激活的子项的数据 | [基本用法](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 {
+ open?: boolean
+ loading?: boolean
+ children?: Array
+}
+
+interface IAccordionLinkable {
+ link?: string
+ target?: boolean
+ linkType?: AccordionMenuItemLinkType
+}
+export interface AccordionBaseItem
+ extends AccordionBase,
+ IAccordionActiveable {
+}
+export interface AccordionBaseMenu
+ extends AccordionBase,
+ IAccordionFoldable {
+}
+
+export interface AccordionLinkableItem
+ extends AccordionBase,
+ IAccordionActiveable,
+ IAccordionLinkable {
+}
+export interface AccordionMenuItem
+ extends AccordionBase,
+ IAccordionActiveable,
+ IAccordionFoldable,
+ IAccordionLinkable {
+}
+
+export type AccordionMenuType = Array;
+
+/* 基础事件类型 */
+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 | 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;
+
+```
+
+### 模板可以用变量值(使用方法如下)
+
+```html
+
+ {{item}}
+
+```
+
+### 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，原始事件 |
+