forked from opentiny/tiny-engine
60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<script lang="jsx">
|
|
import ConfigCollapse from './ConfigCollapse.vue'
|
|
|
|
export default {
|
|
props: {
|
|
group: Object,
|
|
index: Number,
|
|
design: Boolean,
|
|
emptyText: {
|
|
type: String,
|
|
default: '空'
|
|
}
|
|
},
|
|
render() {
|
|
const list = this.group.content || []
|
|
const { item } = this.$slots
|
|
const number = this.group.collapse?.number || list.length
|
|
const propNodes = list.map((data, propIndex) => item({ data, propIndex })) // 使用插槽构造vnode list
|
|
|
|
// 将vNodes拆分为默认显示与更多两部份分别渲染
|
|
const expandItems = propNodes.slice(0, number)
|
|
const collapseItems = propNodes.slice(number)
|
|
|
|
const expandNode = (
|
|
<div class="item-container" data-group-index={this.index}>
|
|
{expandItems.length ? expandItems : <div class="empty">{this.emptyText}</div>}
|
|
</div>
|
|
)
|
|
|
|
const collapseNode = collapseItems.length ? (
|
|
<ConfigCollapse>
|
|
<div class="item-container" data-group-index={this.index}>
|
|
{collapseItems}
|
|
</div>
|
|
</ConfigCollapse>
|
|
) : null
|
|
|
|
return (
|
|
<div style="width:100%">
|
|
{expandNode} {collapseNode}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.item-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.empty {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|