Skip to content

Commit 493d9cf

Browse files
committed
feat: add flat option to CRenderFunction component
1 parent 8536ea3 commit 493d9cf

File tree

2 files changed

+56
-2
lines changed

2 files changed

+56
-2
lines changed

src/components/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,7 @@ export declare class CProgressBar extends CProgress {}
442442

443443
export declare class CRenderFunction extends Vue {
444444
contentToRender: Array<any>
445+
flat: boolean
445446
}
446447
export declare class CScrollbar extends Vue {
447448
settings: object

src/components/render-function/CRenderFunction.vue

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,66 @@ import clone from 'clone'
33
export default {
44
name: 'CRenderFunction',
55
props: {
6-
contentToRender: Array
6+
contentToRender: Array,
7+
flat: Boolean
78
},
89
computed: {
9-
content () {
10+
copiedContent () {
1011
return clone(this.contentToRender)
12+
},
13+
content () {
14+
if (!this.flat) {
15+
return this.copiedContent
16+
} else {
17+
return this.convertedContent[0]
18+
}
19+
},
20+
convertedContent () {
21+
return this.copiedContent.map(item => this.convertItem(item))
22+
}
23+
},
24+
methods: {
25+
convertItem (item) {
26+
let newItem = []
27+
newItem[0] = item._component || 'div'
28+
newItem[1] = {}
29+
newItem[1].props = this.getProps(item)
30+
31+
this.$options.renderFunctionOptions.forEach(option => {
32+
//on option doesn't work, possible to use only nativeOn
33+
if (item[`_${option}`]) {
34+
newItem[1][option] = item[`_${option}`]
35+
}
36+
})
37+
38+
if (item._children) {
39+
newItem[2] = item._children.map(item => this.convertItem(item))
40+
}
41+
return newItem
42+
},
43+
getProps (item) {
44+
return Object.keys(item).reduce((itemProps, key) => {
45+
if (!key.includes('_')) {
46+
itemProps[key] = item[key]
47+
}
48+
return itemProps
49+
}, {})
1150
}
1251
},
52+
renderFunctionOptions: [
53+
'attrs',
54+
'directives',
55+
'on',
56+
'nativeOn',
57+
'class',
58+
'style',
59+
'domProps',
60+
'scopedSlots',
61+
'slot',
62+
'key',
63+
'ref',
64+
'refInFor'
65+
],
1366
render (h) {
1467
const computeRenderFunction = (renderFunction) => {
1568
return renderFunction.map(item => {

0 commit comments

Comments
 (0)