减少层级
Former-commit-id: 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 41b59da80ab4c5c0b9eceeec8fd2f527d22c4ab8 [formerly 3dc1bcda38f391962e102a990c2b68b7a33d4683]]]]] Former-commit-id: 3cd64e384a81021adeab4674894f3e4ba934924a Former-commit-id: 6c1d5c80613ac406276127f3b01566ace11becab Former-commit-id: fb1dae74ec5eea07c96632f6e8841b1bc42a614a [formerly 159c5ea89b386d484b2ef90733075633b156d87e] Former-commit-id: 5be175c876d576777072d4430a8520fc7b255112 Former-commit-id: ec65f0871fca703dbbc7a428ca9e4b582043c361 Former-commit-id: 80b73945bd350373ce7e3d15b8f0432c1427d8e3 Former-commit-id: cc2112baadf022e42428dd0019a764e266570b21 Former-commit-id: b7c059087a58e03c0d954af34b30f94b3e03b60c
This commit is contained in:
75
src/components/d2-container/index.vue
Normal file
75
src/components/d2-container/index.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="container-component" ref="container">
|
||||
<!-- [card] 卡片容器 -->
|
||||
<d2-container-card v-if="type === 'card' && !scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-card>
|
||||
<!-- [card] 卡片容器 滚动优化 -->
|
||||
<d2-container-card-bs v-bind="$attrs" v-if="type === 'card' && scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-card-bs>
|
||||
<!-- [ghost] 隐形容器 -->
|
||||
<d2-container-ghost v-if="type === 'ghost' && !scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-ghost>
|
||||
<!-- [ghost] 隐形容器 滚动优化 -->
|
||||
<d2-container-ghost-bs v-bind="$attrs" v-if="type === 'ghost' && scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-ghost-bs>
|
||||
<!-- [container-full] 填充 -->
|
||||
<d2-container-full v-if="type === 'full' && !scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full>
|
||||
<!-- [container-full-bs] 填充 滚动优化 -->
|
||||
<d2-container-full-bs v-bind="$attrs" v-if="type === 'full' && scroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full-bs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件
|
||||
import d2ContainerFull from './components/d2-container-full.vue'
|
||||
import d2ContainerFullBs from './components/d2-container-full-bs.vue'
|
||||
import d2ContainerGhost from './components/d2-container-ghost.vue'
|
||||
import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
|
||||
import d2ContainerCard from './components/d2-container-card.vue'
|
||||
import d2ContainerCardBs from './components/d2-container-card-bs.vue'
|
||||
export default {
|
||||
name: 'd2-container',
|
||||
props: {
|
||||
// 容器样式
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'full'
|
||||
},
|
||||
// 滚动优化
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-container-full': d2ContainerFull,
|
||||
'd2-container-full-bs': d2ContainerFullBs,
|
||||
'd2-container-ghost': d2ContainerGhost,
|
||||
'd2-container-ghost-bs': d2ContainerGhostBs,
|
||||
'd2-container-card': d2ContainerCard,
|
||||
'd2-container-card-bs': d2ContainerCardBs
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user