..
This commit is contained in:
那些花儿
@@ -1,179 +1,252 @@
|
||||
<template>
|
||||
<div class="guava-main-content">
|
||||
<div v-show="v === 'index'" key="index" class="transition-item">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<el-card v-if="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; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: flex-end">
|
||||
<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-if="v === 'view'" key="view" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</template>
|
||||
<div :class="{ card_scroll: !view_page_scroll }">
|
||||
<slot name="view"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="v === 'approval'" key="approval" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</template>
|
||||
<div :class="{ card_scroll: approval_scroll }">
|
||||
<slot name="approval"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="v === 'public'" key="public" shadow="never" class="animated-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
|
||||
</div>
|
||||
<div :class="{ card_scroll: public_card_scroll }">
|
||||
<slot name="public"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="guava-main-content">
|
||||
<div v-show="v === 'index'" key="index" class="transition-item">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'edit'" key="edit" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="edit_func"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="edit"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.edit_func">
|
||||
<slot name="edit_func"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'view'" key="view" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="view"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.view_footer">
|
||||
<slot name="view_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'approval'" key="approval" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="approval"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.approval_footer">
|
||||
<slot name="approval_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="v === 'public'" key="public" class="page-container animated-card">
|
||||
<div class="page-header">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<slot name="public"></slot>
|
||||
</div>
|
||||
<div class="page-footer" v-if="$slots.public_footer">
|
||||
<slot name="public_footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "index"
|
||||
},
|
||||
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
||||
edit_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
view_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
approval_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
//view 页面是否滚动
|
||||
view_page_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public_card_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "index"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: "index"
|
||||
}
|
||||
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
||||
edit_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
watch: {
|
||||
v(newValue, oldValue) {
|
||||
this.$emit("vchange", { newValue, oldValue })
|
||||
this.$emit("input", newValue)
|
||||
}
|
||||
view_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
methods: {
|
||||
index(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
edit(callback = () => {}) {
|
||||
this.v = "edit"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
view(callback = () => {}) {
|
||||
this.v = "view"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
approval(callback = () => {}) {
|
||||
this.v = "approval"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
public(callback = () => {}) {
|
||||
this.v = "public"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
back(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
}
|
||||
approval_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//view 页面是否滚动
|
||||
view_page_scroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public_card_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: "index"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
this.v = newVal
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
v(newValue, oldValue) {
|
||||
this.$emit("vchange", { newValue, oldValue })
|
||||
this.$emit("input", newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
edit(callback = () => {}) {
|
||||
this.v = "edit"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
view(callback = () => {}) {
|
||||
this.v = "view"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
approval(callback = () => {}) {
|
||||
this.v = "approval"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
public(callback = () => {}) {
|
||||
this.v = "public"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
},
|
||||
back(callback = () => {}) {
|
||||
this.v = "index"
|
||||
this.$nextTick(() => {
|
||||
callback()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.guava-main-content {
|
||||
min-height: 100%;
|
||||
/*height: 100vh;
|
||||
overflow: hidden;*/
|
||||
}
|
||||
|
||||
.page-container {
|
||||
height: calc(100vh - 84px);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-right button{
|
||||
padding: 9px 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条但保持滚动功能 */
|
||||
.page-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.page-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.page-footer{
|
||||
flex-shrink: 0;
|
||||
padding: 12px 10px;
|
||||
border-top: 1px solid rgb(235, 238, 245);
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@keyframes cardAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated-card {
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
margin-top: 0 !important;
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes cardAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
max-height: calc(100vh - 56px - 40px - 30px - 50px - 34px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-horizontal {
|
||||
display: none;
|
||||
.transition-item {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user