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