first commit
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user