Skip to content

Commit 45be060

Browse files
committed
feat(accordion): basic d-accordion and d-accordion-list
1 parent c4ce5fc commit 45be060

File tree

6 files changed

+117
-67
lines changed

6 files changed

+117
-67
lines changed

devui/accordion/accordion-list.tsx

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,42 @@
11
import { defineComponent } from 'vue'
2-
import { AccordionMenuItem, AccordionMenuType } from './accordion.type'
2+
import { AccordionMenuItem } from './accordion.type'
33

44
export default defineComponent({
55
name: 'd-accordion-list',
6+
inheritAttrs: false,
67
props: {
7-
data: {
8-
type: Array as () => AccordionMenuType
9-
},
8+
data: Array as () => Array<AccordionMenuItem>,
109
deepth: {
1110
type: Number,
1211
default: 0
1312
},
14-
parent: {
15-
type: Object as () => AccordionMenuItem
16-
}
13+
parent: Object as () => AccordionMenuItem,
14+
innerListTemplate: Boolean,
1715
},
1816
setup(props, ctx) {
19-
const { data, deepth, parent } = props;
20-
console.log('accordion list data:', data);
17+
const { data, deepth, innerListTemplate } = props;
2118

2219
return () => {
23-
return <ul>
24-
{ data.map(category => {
25-
return <li class="devui-accordion-item" key={ category.title }>
26-
{ category.title }
20+
return (!innerListTemplate || deepth === 0) && <ul class="devui-accordion-list" {...ctx.attrs}>
21+
{ data.map(item => {
22+
return <li class="devui-accordion-item" key={item.title}>
23+
<div class="devui-accordion-menu-item open" title={item.title}>
24+
<div title={item.title} class={`devui-accordion-item-title devui-over-flow-ellipsis open`}>{ item.title }</div>
25+
<div class="devui-accordion-submenu devui-accordion-show-animate" style="opacity: 1; overflow: hidden;">
26+
<ul class="devui-accordion-list">
27+
{ item.children.map(component => {
28+
return <li class="devui-accordion-item" key={component.title}>
29+
<div class="devui-accordion-item-title devui-over-flow-ellipsis" style="text-indent: 20px;" title={component.title}>
30+
<router-link to={component.link}>
31+
<div class="devui-accordion-splitter" style="left: 30px;"></div>
32+
{ component.title }
33+
</router-link>
34+
</div>
35+
</li>
36+
})}
37+
</ul>
38+
</div>
39+
</div>
2740
</li>
2841
}) }
2942
</ul>

devui/accordion/accordion.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
display: block;
88
}
99

10-
d-accordion-menu,
10+
.devui-accordion-menu-item,
1111
d-accordion-item,
1212
d-accordion-item-hreflink,
1313
d-accordion-item-routerlink,
14-
d-accordion-list {
14+
.devui-accordion-list {
1515
display: block;
1616
}
1717

@@ -165,7 +165,7 @@ d-accordion-item-routerlink {
165165
}
166166
}
167167

168-
d-accordion-list.devui-accordion-menu-hidden {
168+
.devui-accordion-list.devui-accordion-menu-hidden {
169169
display: none;
170170
}
171171

devui/accordion/accordion.tsx

Lines changed: 74 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,86 @@
11
import { defineComponent } from 'vue'
2+
import AccordionList from './accordion-list'
3+
import { AccordionMenuType } from './accordion.type'
24
import './accordion.scss'
35

46
export default defineComponent({
57
name: 'd-accordion',
68
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' },
1542
},
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
2145

2246
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>
4756
}
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+
// }
4885
}
4986
})

devui/button/demo/button-demo.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@
1919

2020
<script>
2121
import { defineComponent } from 'vue'
22-
import DevUICodeBox from '../../shared/devui-codebox/devui-codebox.vue'
23-
import DevUIButtonPrimary from './primary/primary'
24-
import DevUIButtonCommon from './common/common'
22+
import CodeBox from '../../shared/devui-codebox/devui-codebox.vue'
23+
import ButtonPrimary from './primary/primary'
24+
import ButtonCommon from './common/common'
2525
2626
export default defineComponent({
2727
name: 'd-button-demo',
2828
components: {
29-
'd-codebox': DevUICodeBox,
30-
'd-button-primary': DevUIButtonPrimary,
31-
'd-button-common': DevUIButtonCommon,
29+
'd-codebox': CodeBox,
30+
'd-button-primary': ButtonPrimary,
31+
'd-button-common': ButtonCommon,
3232
},
3333
setup() {
3434
const primarySource = {};

src/components/app-content.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@
3838
import { groupBy, map } from 'lodash-es'
3939
import { routesConfig } from './component.route'
4040
import AppDemoCell from './app-demo-cell.vue'
41-
import DevUIAccordion from '../../devui/accordion/accordion'
41+
import Accordion from '../../devui/accordion/accordion'
4242
4343
export default {
4444
name: 'app-content',
4545
components: {
4646
AppDemoCell,
47-
'd-accordion': DevUIAccordion
47+
'd-accordion': Accordion
4848
},
4949
data(): any {
5050
return {

src/components/app-demo-cell.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
</template>
2424

2525
<script>
26-
import DevUIButtonDemo from '../../devui/button/demo/button-demo.vue'
27-
import DevUITabs from '../../devui/tabs/tabs.vue'
28-
import DevUITab from '../../devui/tabs/tab.vue'
26+
import ButtonDemo from '../../devui/button/demo/button-demo.vue'
27+
import Tabs from '../../devui/tabs/tabs.vue'
28+
import Tab from '../../devui/tabs/tab.vue'
2929
3030
export default {
3131
name: 'app-demo-cell',
3232
components: {
33-
'd-button-demo': DevUIButtonDemo,
34-
'd-tabs': DevUITabs,
35-
'd-tab': DevUITab,
33+
'd-button-demo': ButtonDemo,
34+
'd-tabs': Tabs,
35+
'd-tab': Tab,
3636
},
3737
data() {
3838
return {

0 commit comments

Comments
 (0)