no message
Former-commit-id: 1823f1a26c18e3603528a61567e69fcb7996593d Former-commit-id: 35579f0af3dec8e09da4444edf0fd84dd345df2e Former-commit-id: db6caccb186681f4ea76cec45ca9871bcf76053e
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dd-card-full">
|
<div class="dd-card-full" :style="cardStyle">
|
||||||
<div class="dd-card-full__header" ref="header">
|
<div class="dd-card-full__header" ref="header">
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
</div>
|
</div>
|
||||||
@@ -11,8 +11,40 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
console.log(this.$refs.header.offsetHeight)
|
console.log(this.$refs.header.offsetHeight)
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cardStyle () {
|
||||||
|
return {
|
||||||
|
top: `${this.top}px`,
|
||||||
|
right: `${this.right}px`,
|
||||||
|
bottom: `${this.bottom}px`,
|
||||||
|
left: `${this.left}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -21,16 +53,14 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dd-card-full {
|
.dd-card-full {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #ebeef5;
|
border: 1px solid #ebeef5;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
||||||
color: #303133;
|
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 {
|
.dd-card-full__header {
|
||||||
padding: 18px 20px;
|
padding: 18px 20px;
|
||||||
border-bottom: 1px solid #ebeef5;
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<!-- [full-card] 撑满 -->
|
<!-- [full-card] 撑满 -->
|
||||||
<card-full v-if="type === 'full-card'">
|
<card-full v-if="type === 'full-card'" :right="20" :bottom="20">
|
||||||
<slot v-if="$slots.header" name="header" slot="header"></slot>
|
<slot v-if="$slots.header" name="header" slot="header"></slot>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</card-full>
|
</card-full>
|
||||||
|
|||||||
Reference in New Issue
Block a user