165ae5d6a2
Former-commit-id: fe0e951f1addef7d9a1bdcb923a404a38581db6a Former-commit-id: 705fe2d2573ed81dad4a16b61b6585b1d831828f Former-commit-id: 28e7a04fc692395cb7405f81cf6ce6c118ee74be
113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<template>
|
|
<div class="dd-card-full" :style="cardStyle">
|
|
<div v-if="$slots.header" class="dd-card-full__header" ref="header">
|
|
<slot name="header"></slot>
|
|
</div>
|
|
<div class="dd-card-full__body" :style="bodyStyle">
|
|
<slot></slot>
|
|
</div>
|
|
<div v-if="$slots.footer" class="dd-card-full__footer" ref="footer">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 定位 上 右 下 左
|
|
top: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
},
|
|
right: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
},
|
|
bottom: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
},
|
|
left: {
|
|
type: Number,
|
|
required: false,
|
|
default: 0
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
headerHeight: 0,
|
|
footerHeight: 0
|
|
}
|
|
},
|
|
mounted () {
|
|
this.headerHeight = this.$slots.header ? this.$refs.header.offsetHeight : 0
|
|
this.footerHeight = this.$slots.footer ? this.$refs.footer.offsetHeight : 0
|
|
},
|
|
computed: {
|
|
cardStyle () {
|
|
return {
|
|
top: `${this.top}px`,
|
|
right: `${this.right}px`,
|
|
bottom: `${this.bottom}px`,
|
|
left: `${this.left}px`
|
|
}
|
|
},
|
|
bodyStyle () {
|
|
return {
|
|
top: `${this.headerHeight}px`,
|
|
bottom: `${this.footerHeight}px`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
$border-color: #d8dfea;
|
|
.dd-card-full {
|
|
position: absolute;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
border-top: 1px solid $border-color;
|
|
border-left: 1px solid $border-color;
|
|
border-right: 1px solid $border-color;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
color: #303133;
|
|
&:hover {
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
|
}
|
|
.dd-card-full__header {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
padding: 18px 20px;
|
|
border-bottom: 1px solid $border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
.dd-card-full__body {
|
|
position: absolute;
|
|
padding: 20px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
overflow: auto;
|
|
}
|
|
.dd-card-full__footer {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
padding: 18px 20px;
|
|
border-top: 1px solid $border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|