Skip to content

Commit a494a33

Browse files
committed
refactor(accordion): accordion component .vue to .tsx
1 parent 22079c9 commit a494a33

File tree

3 files changed

+51
-54
lines changed

3 files changed

+51
-54
lines changed

devui/accordion/accordion.vue renamed to devui/accordion/accordion.scss

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,3 @@
1-
<template>
2-
<ul class="devui-accordion-list" v-if="!innerListTemplate || deepth === 0">
3-
<li class="devui-accordion-item" v-for="category in data" :key="category.title">
4-
<div
5-
class="devui-accordion-item-title devui-over-flow-ellipsis"
6-
:class="{
7-
open: open,
8-
active: childActived,
9-
disabled: disabled
10-
}"
11-
:title="category.title"
12-
@click="!disabled && toggle($event)"
13-
>
14-
<div
15-
class="devui-accordion-splitter"
16-
:class="{
17-
'devui-parent-list': deepth === 0
18-
}"
19-
:style="{ left: deepth * 20 + 10 + 'px' }"
20-
></div>
21-
{{ category.title }}
22-
</div>
23-
<ul class="devui-accordion-submenu">
24-
<li class="devui-accordion-item" v-for="component in category.children" :key="component.title">
25-
<router-link :to="component.link">{{ component.title }}</router-link>
26-
</li>
27-
</ul>
28-
</li>
29-
</ul>
30-
</template>
31-
32-
<script lang="ts">
33-
import { defineComponent } from 'vue'
34-
35-
export default defineComponent({
36-
name: 'd-accordion',
37-
props: {
38-
data: Object,
39-
linkType: String
40-
},
41-
setup(props) {
42-
const { data, linkType } = props;
43-
console.log('props:', props);
44-
console.log('data:', data);
45-
console.log('linkType:', linkType);
46-
}
47-
})
48-
</script>
49-
50-
<style lang="scss">
511
@import '../style/mixins/index';
522
@import '../style/theme/color';
533
@import '../style/theme/shadow';
@@ -300,6 +250,4 @@ d-accordion-list.devui-accordion-menu-hidden {
300250
display: block;
301251
text-decoration: none;
302252
width: 100%;
303-
}
304-
305-
</style>
253+
}

devui/accordion/accordion.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { defineComponent } from 'vue'
2+
import './accordion.scss'
3+
4+
export default defineComponent({
5+
name: 'd-accordion',
6+
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)
15+
},
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);
21+
22+
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+
}
48+
}
49+
})

src/components/app-content.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
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.vue'
41+
import DevUIAccordion from '../../devui/accordion/accordion'
4242
4343
export default {
4444
name: 'app-content',

0 commit comments

Comments
 (0)