展开收起流程组件

最新推荐文章于 2024-09-20 13:59:28 发布

ps笔记

最新推荐文章于 2024-09-20 13:59:28 发布

阅读量81

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/lv_suri/article/details/133789870

版权

<template>
    <div class="step-frame" :style="{'width': width}" :class="{'step-frame--collapse': !expanded}">
        <div v-if="collapse" class="step-frame--expand" @click="handleExpand">
            {{ expanded ? '收起' : '展开' }}
        </div>
        <transition name="slide">
            <div v-show="expanded" class="step-frame-container">
                <div class="step-frame-title">
                    {{ title }}
                </div>
                <div class="step-frame-content">
                    <slot></slot>
                </div> 
            </div>
        </transition>
    </div>
</template>

<script>
module.exports = {
    props: {
        /** 标题 */
        title: {
            type: String,
            default: ''
        },
        /** 宽度 */
        width: {
            type: String,
            default: ''
        },
        /** 是否可折叠 */
        collapse: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            expanded: true
        }
    },
    methods: {
        handleExpand() {
            this.expanded = !this.expanded;
        }
    }
}
</script>

<style scoped>
.step-frame {
    position: relative;
    height: 100%;
    overflow: hidden;
    transition: width 0.1s;
    border-left: 1px solid #D9D9D9;
}
.step-frame--collapse {
    width: 25px !important;
    transition: width 0.2s;
    transition-delay: 0.5s;
}
.step-frame-title {
    color: #262626;
    background: #EFEFEF;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
}
.step-frame--expand {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    background: #BFBFBF;
    color: #ffffff;
    font-size: 12px;
    border-radius: 0px 6px 6px 0px;
    text-align: center;
    padding: 2px 1px;
    cursor: pointer;
    z-index: 10;
}
.step-frame-container {
    height: 100%;
}
.step-frame-content {
    height: 100%;
    overflow: auto;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s, width 0.5s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>