1
1
import { defineComponent } from 'vue'
2
+ import AccordionList from './accordion-list'
3
+ import { AccordionMenuType } from './accordion.type'
2
4
import './accordion.scss'
3
5
4
6
export default defineComponent ( {
5
7
name : 'd-accordion' ,
6
8
props : {
7
- data : Object ,
8
- linkType : String ,
9
- innerListTemplate : Boolean ,
10
- deepth : Number ,
11
- open : Boolean ,
12
- childActived : Boolean ,
13
- disabled : Boolean ,
14
- toggle : Function as unknown as ( ) => ( ( event : MouseEvent ) => void )
9
+ data : Array as ( ) => Array < any > | AccordionMenuType ,
10
+ /* Key值定义, 用于自定义数据结构 */
11
+ titleKey : { type : String , default : 'title' } , // 标题的key,item[titleKey]类型为string,为标题显示内容
12
+ loadingKey : { type : String , default : 'loading' } , // 子菜单动态加载item[loadingKey]类型为boolean
13
+ childrenKey : { type : String , default : 'children' } , // 子菜单Key
14
+ disabledKey : { type : String , default : 'disabled' } , // 是否禁用Key
15
+ activeKey : { type : String , default : 'active' } , // 菜单是否激活/选中
16
+ openKey : { type : String , default : 'open' } , // 菜单是否打开
17
+
18
+ /* 菜单模板 */
19
+ menuItemTemplate : { type : String } , // 可展开菜单内容条模板
20
+ itemTemplate : { type : String } , // 可点击菜单内容条模板
21
+
22
+ menuToggle : Function as unknown as ( ) => ( ( event : MouseEvent ) => void ) , // 可展开菜单展开事件
23
+ itemClick : Function as unknown as ( ) => ( ( event : MouseEvent ) => void ) , // 可点击菜单点击事件
24
+ activeItemChange : Function as unknown as ( ) => ( ( event : MouseEvent ) => void ) ,
25
+
26
+ /** 高级选项和模板 */
27
+ restrictOneOpen : { type : Boolean , default : false } , // 限制一级菜单同时只能打开一个
28
+ autoOpenActiveMenu : { type : Boolean , default : false } , // 自动展开活跃菜单
29
+ showNoContent : { type : Boolean , default : true } , // 没有内容的时候是否显示没有数据
30
+ noContentTemplate : { type : String } , // 没有内容的时候使用自定义模板
31
+ loadingTemplate : { type : String } , // 加载中使用自定义模板
32
+ innerListTemplate : { type : String } , // 可折叠菜单内容完全自定义,用做折叠面板
33
+
34
+ /* 内置路由/链接/动态判断路由或链接类型 */
35
+ linkType : { type : String as ( ) => 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string , default : '' } ,
36
+ linkTypeKey : { type : String , default : 'linkType' } , // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区
37
+ linkKey : { type : String , default : 'link' } , // 链接内容的key
38
+ linkTargetKey : { type : String , default : 'target' } , // 链接目标窗口的key
39
+ linkDefaultTarget : { type : String , default : '_self' } , // 不设置target的时候target默认值
40
+
41
+ accordionType : { type : String as ( ) => 'normal' | 'embed' , default : 'normal' } ,
15
42
} ,
16
- setup ( props ) {
17
- const { data, linkType, innerListTemplate, deepth, open, childActived, disabled, toggle } = props ;
18
- console . log ( 'props:' , props ) ;
19
- console . log ( 'data:' , data ) ;
20
- console . log ( 'linkType:' , linkType ) ;
43
+ setup ( props , ctx ) {
44
+ const { data, accordionType } = props
21
45
22
46
return ( ) => {
23
- return ( ! innerListTemplate || deepth === 0 ) ? < ul class = "devui-accordion-list" >
24
- { data . map ( category => {
25
- return < li class = "devui-accordion-item" key = { category . title } >
26
- < div
27
- class = { `devui-accordion-item-title devui-over-flow-ellipsis ${ open ?'open' :'' } ${ childActived ?'active' :'' } ${ disabled ?'disabled' :'' } ` }
28
- title = { category . title }
29
- onClick = { toggle }
30
- >
31
- < div
32
- class = { `devui-accordion-splitter ${ deepth === 0 ?'devui-parent-list' :'' } ` }
33
- style = { { left : deepth * 20 + 10 + 'px' } }
34
- > </ div >
35
- { category . title }
36
- </ div >
37
- < ul class = "devui-accordion-submenu" >
38
- { category . children . map ( component => {
39
- return < li class = "devui-accordion-item" key = { component . title } >
40
- < router-link to = { component . link } > { component . title } </ router-link >
41
- </ li >
42
- } ) }
43
- </ ul >
44
- </ li >
45
- } ) }
46
- </ ul > : null
47
+ return < div class = { `devui-accordion-menu devui-scrollbar ${ accordionType === 'normal' ?'devui-accordion-menu-normal' :'' } ` } >
48
+ < AccordionList
49
+ data = { data }
50
+ deepth = { 0 }
51
+ parent = { null }
52
+ { ...props as any }
53
+ >
54
+ </ AccordionList >
55
+ </ div >
47
56
}
57
+
58
+ // return () => {
59
+ // return (!innerListTemplate || deepth === 0) ? <ul class="devui-accordion-list">
60
+ // { data.map(category => {
61
+ // return <li class="devui-accordion-item" key={category.title}>
62
+ // <div
63
+ // class={`devui-accordion-item-title devui-over-flow-ellipsis ${open?'open':''} ${childActived?'active':''} ${disabled?'disabled':''}`}
64
+ // title={category.title}
65
+ // onClick={toggle}
66
+ // >
67
+ // <div
68
+ // class={`devui-accordion-splitter ${deepth === 0?'devui-parent-list':''}`}
69
+ // style={{ left: deepth * 20 + 10 + 'px' }}
70
+ // ></div>
71
+ // { category.title }
72
+ // <AccordionList {...props} data={data as any}></AccordionList>
73
+ // </div>
74
+ // <ul class="devui-accordion-submenu">
75
+ // { category.children.map(component => {
76
+ // return <li class="devui-accordion-item" key={component.title}>
77
+ // <router-link to={component.link}>{ component.title }</router-link>
78
+ // </li>
79
+ // }) }
80
+ // </ul>
81
+ // </li>
82
+ // }) }
83
+ // </ul> : null
84
+ // }
48
85
}
49
86
} )
0 commit comments