no message
Former-commit-id: 0d063d3d6a52b6a81611b6daf0978fd32bb5c1c3 [formerly 0d063d3d6a52b6a81611b6daf0978fd32bb5c1c3 [formerly 0d063d3d6a52b6a81611b6daf0978fd32bb5c1c3 [formerly 0d063d3d6a52b6a81611b6daf0978fd32bb5c1c3 [formerly f6e2b9fd32be3091d2f98266558c6d7f48d6a039 [formerly 61746560a0a78223de2c5d460fb279e7ae68eef1]]]]] Former-commit-id: 42395d8c93e9398ffc9e4a844a2bd5c5f1917383 Former-commit-id: e1de54cadb8d0468559bfdb46cc9266cffc671ef Former-commit-id: 49bb2517e64a976890020f2f8954d0987c751e4d [formerly bb758f8991a344f6bf99f98ce88f717038581c96] Former-commit-id: 15fc0607793ec14f5b49c9c9340514bef688b73d Former-commit-id: c707691d953745cc04ad859b86da45a93663f9a8 Former-commit-id: 8270378e5519601d477733c0d345ce2ebbc0f5c7 Former-commit-id: 6602b3e8f7722fe7c364b036c23c05bbc8ef7755 Former-commit-id: e65c2360a363e554879059b908a851c4c7070306
This commit is contained in:
@@ -1 +1 @@
|
|||||||
76b231c8f2b45f72c095f47ab055fbebb41ff160
|
7951ca687a987c2f872c6a63ac497cfc58cba7dc
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="d2-container-full" :style="cardStyle">
|
<div class="d2-container-full">
|
||||||
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
|
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
|
||||||
<slot name="header"/>
|
<slot name="header"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="d2-container-full__body" :style="bodyStyle">
|
<div class="d2-container-full__body">
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
|
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
|
||||||
@@ -14,55 +14,33 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'd2-container-full',
|
name: 'd2-container-full'
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// [组件] d2-container-full
|
||||||
|
.d2-container-full {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
.d2-container-full__header {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.d2-container-full__body {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.d2-container-full__footer {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
<!-- [container-full] 撑满 -->
|
<!-- [container-full] 撑满 -->
|
||||||
<d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
|
<d2-container-full v-if="type === 'full'">
|
||||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||||
<slot/>
|
<slot/>
|
||||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<d2-markdown :source="doc"/>
|
<d2-markdown :source="doc"/>
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
我是插入到 footer 中的内容
|
<d2-demo-link-btn title="D2Admin" link="https://github.com/FairyEver/d2admin-vue-element"/>
|
||||||
</template>
|
</template>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user