146 lines
2.9 KiB
Vue
146 lines
2.9 KiB
Vue
<template>
|
|
<div class="guava-main-content">
|
|
<div v-show="v==='index'" key="index" class="transition-item">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<el-card v-show="v==='edit'" key="edit" shadow="never" class="animated-card">
|
|
<template #header>
|
|
<el-row type="flex">
|
|
<el-col :span="12">
|
|
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
|
|
</el-col>
|
|
<el-col :span="12" class="text-right">
|
|
<slot name="edit_func"></slot>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<div :class="{'card_scroll':edit_scroll}">
|
|
<slot name="edit"></slot>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card v-show="v==='view'" key="view" shadow="never" class="animated-card">
|
|
<template #header>
|
|
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
|
|
</template>
|
|
<div :class="{'card_scroll':edit_scroll}">
|
|
<slot name="view"></slot>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card v-show="v==='public'" key="public" shadow="never" class="animated-card">
|
|
<div slot="header" class="clearfix">
|
|
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="back()">返回
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<slot name="public"></slot>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: 'index'
|
|
},
|
|
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
|
edit_scroll: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
view_scroll: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
v: 'index',
|
|
}
|
|
},
|
|
watch: {
|
|
v(newValue, oldValue) {
|
|
this.$emit('vchange', {newValue, oldValue})
|
|
this.$emit('input', newValue)
|
|
}
|
|
},
|
|
methods: {
|
|
index() {
|
|
this.v = 'index'
|
|
},
|
|
edit() {
|
|
this.v = 'edit'
|
|
},
|
|
view() {
|
|
this.v = 'view'
|
|
},
|
|
public() {
|
|
this.v = 'public'
|
|
},
|
|
back() {
|
|
this.v = 'index'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.guava-main-content {
|
|
padding: 10px 12px;
|
|
background-color: #f6f6f6;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.animated-card {
|
|
animation-name: cardAnimation;
|
|
animation-duration: .5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes cardAnimation {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.el-card__header {
|
|
padding: 5px 20px !important;
|
|
}
|
|
|
|
.el-tabs--border-card {
|
|
box-shadow: unset !important;
|
|
}
|
|
|
|
.card_scroll {
|
|
max-height: calc(100vh - 50px - 20px - 54px - 40px - 5px);
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.card_scroll {
|
|
overflow: scroll;
|
|
}
|
|
|
|
.card_scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.card_scroll::-webkit-scrollbar-vertical {
|
|
display: none;
|
|
}
|
|
|
|
.card_scroll::-webkit-scrollbar-horizontal {
|
|
display: none;
|
|
}
|
|
|
|
</style> |