zhgh_ncu/src/main/resources/static/components/plugins/Guava.vue

<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>
</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
        }
    },
    data() {
        return {
            v: "index"
        }
    },
    watch: {
        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>
.guava-main-content {
    min-height: 100%;
}

.animated-card {
    animation-name: cardAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    margin-top: 0 !important;
}

@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;
}
</style>