no message
Former-commit-id: 6c662ce48ae133e62f326723c0acace4a99b70d1 Former-commit-id: d6734073b9816f545fac36f942dd7f9bdcc95a83 Former-commit-id: 8fdcc1c3852f13eeb2616882f8b77b4e08a087a0
This commit is contained in:
10
src/components/core/Container/_CardFull.vue
Normal file
10
src/components/core/Container/_CardFull.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="dd-card-full">
|
||||
<div class="dd-card-full__header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="dd-card-full__body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -2,9 +2,7 @@
|
||||
<div class="container-component" :class="{responsive}">
|
||||
<!-- [card] 卡片容器 -->
|
||||
<el-card v-if="type === 'card'">
|
||||
<div v-if="$slots.header" slot="header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<slot v-if="$slots.header" name="header" slot="header"></slot>
|
||||
<slot></slot>
|
||||
</el-card>
|
||||
<!-- [ghost] 隐形的容器 -->
|
||||
@@ -12,14 +10,18 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- [full-card] 撑满 -->
|
||||
<div v-if="type === 'full-card'">
|
||||
<card-full v-if="type === 'full-card'">
|
||||
<slot v-if="$slots.header" name="header" slot="header"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</card-full>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
CardFull: () => import('./_CardFull.vue')
|
||||
},
|
||||
props: {
|
||||
// 容器样式
|
||||
type: {
|
||||
@@ -33,11 +35,27 @@ export default {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
headerHeight: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fullCardBodyStyle () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$refs.fullCardHeader.offsetHeight + 18 * 2)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public.scss';
|
||||
.container-component {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
@@ -59,4 +77,16 @@ export default {
|
||||
max-width: 1920px - 200px;
|
||||
}
|
||||
}
|
||||
.full-card {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: $margin;
|
||||
bottom: $margin;
|
||||
left: 0px;
|
||||
.el-card__header {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user