no message

Former-commit-id: 6c662ce48ae133e62f326723c0acace4a99b70d1
Former-commit-id: d6734073b9816f545fac36f942dd7f9bdcc95a83
Former-commit-id: 8fdcc1c3852f13eeb2616882f8b77b4e08a087a0
This commit is contained in:
李杨
2018-03-09 19:16:04 +08:00
parent 0b39efe7f9
commit 9a8a69eac5
4 changed files with 50 additions and 6 deletions

View 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>

View File

@@ -2,9 +2,7 @@
<div class="container-component" :class="{responsive}"> <div class="container-component" :class="{responsive}">
<!-- [card] 卡片容器 --> <!-- [card] 卡片容器 -->
<el-card v-if="type === 'card'"> <el-card v-if="type === 'card'">
<div v-if="$slots.header" slot="header"> <slot v-if="$slots.header" name="header" slot="header"></slot>
<slot name="header"></slot>
</div>
<slot></slot> <slot></slot>
</el-card> </el-card>
<!-- [ghost] 隐形的容器 --> <!-- [ghost] 隐形的容器 -->
@@ -12,14 +10,18 @@
<slot></slot> <slot></slot>
</div> </div>
<!-- [full-card] 撑满 --> <!-- [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> <slot></slot>
</div> </card-full>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
components: {
CardFull: () => import('./_CardFull.vue')
},
props: { props: {
// 容器样式 // 容器样式
type: { type: {
@@ -33,11 +35,27 @@ export default {
required: false, required: false,
default: false default: false
} }
},
data () {
return {
headerHeight: 0
}
},
computed: {
fullCardBodyStyle () {
return {
}
}
},
mounted () {
console.log(this.$refs.fullCardHeader.offsetHeight + 18 * 2)
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~@/assets/style/public.scss';
.container-component { .container-component {
margin-right: 20px; margin-right: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@@ -59,4 +77,16 @@ export default {
max-width: 1920px - 200px; 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> </style>

View File

@@ -1,5 +1,8 @@
<template> <template>
<Container type="full-card"> <Container type="full-card">
full-card <template slot="header">
header
</template>
<p v-for="(i, index) in 100" :key="index">{{i}}</p>
</Container> </Container>
</template> </template>

View File

@@ -0,0 +1 @@
765befd0f1a28fd44f383630c777dcd91a6b8dd7