180 lines
4.6 KiB
Vue
180 lines
4.6 KiB
Vue
<template>
|
|
<div class="guava-main-content">
|
|
|
|
<transition-group appear mode="out-in" name="el-fade-in">
|
|
<!-- <transition name="el-fade-in-linear" appear mode="out-in">-->
|
|
<div v-show="v==='index'" key="index" class="transition-item">
|
|
<slot></slot>
|
|
</div>
|
|
<!-- </transition>-->
|
|
|
|
<el-card v-show="v==='edit'" key="edit" class="operation" shadow="never">
|
|
<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>
|
|
<slot name="edit"></slot>
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
<el-card v-show="v==='view'" key="view" class="operation" shadow="never">
|
|
<template #header>
|
|
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
|
|
</template>
|
|
<slot name="view"></slot>
|
|
</el-card>
|
|
|
|
<el-card v-show="v==='public'" key="public" class="operation" shadow="never">
|
|
<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>
|
|
|
|
</transition-group>
|
|
<!-- <transition name="el-fade-in-linear" appear mode="out-in">-->
|
|
<!-- <div v-show="v==='index'" class="transition-item" key="index">-->
|
|
<!-- <slot></slot>-->
|
|
<!-- </div>-->
|
|
<!-- </transition>-->
|
|
|
|
<!-- <transition name="el-fade-in-linear" appear mode="in-out">-->
|
|
<!-- <el-card v-show="v==='edit'" class="operation" shadow="never" key="edit">-->
|
|
<!-- <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>-->
|
|
<!-- <slot name="edit"></slot>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </el-card>-->
|
|
<!-- </transition>-->
|
|
|
|
<!-- <el-card v-show="v==='view'" class="operation" shadow="never" key="view">-->
|
|
<!-- <template #header>-->
|
|
<!-- <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>-->
|
|
<!-- </template>-->
|
|
<!-- <slot name="view"></slot>-->
|
|
<!-- </el-card>-->
|
|
|
|
<!-- <div v-show="v==='public'" class="transition-item transition-item2">-->
|
|
<!-- <el-card class="box-card v-box guava-card" shadow="never">-->
|
|
<!-- <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>-->
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: "el-zoom-in-top"
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: 'index'
|
|
}
|
|
},
|
|
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'
|
|
}
|
|
},
|
|
created() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.guava-main-content {
|
|
padding: 10px;
|
|
background-color: #f6f6f6;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.el-card__header {
|
|
padding: 5px 20px !important;
|
|
}
|
|
|
|
.operation {
|
|
min-height: calc(100vh - 70px) !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.operation .el-card__body {
|
|
flex: auto;
|
|
}
|
|
|
|
.el-tabs--border-card {
|
|
box-shadow: unset !important;
|
|
}
|
|
|
|
/*.v-enter-active, .v-leave-active {*/
|
|
/* transition: all 0.5s;*/
|
|
/*}*/
|
|
|
|
/*.v-enter, .v-leave-to {*/
|
|
/* opacity: 0;*/
|
|
/*}*/
|
|
|
|
/*.v-leave, .v-enter-to {*/
|
|
/* opacity: 1;*/
|
|
/*}*/
|
|
|
|
</style> |