侧边导航栏-交互

效果图：

<template>
    <div class="interface-list-api-document-container">
        <el-aside class="api-document__nav-menu" width="150px">
            <el-button
                v-for="item in navMenu"
                type="text"
                :key="item.ref"
                @click="handleNavJump(item.ref)"
            >
                {{ item.title }}
            </el-button>
        </el-aside>

        <el-main
            class="api-document__content"
            :style="{ height: height + 'px' }"
        >
            <div v-for="item in navMenu" :key="item.ref" :ref="item.ref">
                <el-card>
                    <template v-if="item.ref === 'nav-api-address'">
                        <pre>{{ item }}</pre>
                    </template>

                    <template v-if="item.ref === 'nav-request-method'">
                        <pre>{{ item }}</pre>
                    </template>

                    <template v-if="item.ref === 'nav-request-header'">
                        <pre>{{ item }}</pre>
                    </template>

                    <template v-if="item.ref === 'nav-request-body'">
                        <pre>{{ item }}</pre>
                    </template>
                </el-card>
            </div>
        </el-main>
    </div>
</template>

<script>
const NAV_MENU = [
    {
        ref: 'nav-api-address',
        title: '接口地址',
    },
    {
        ref: 'nav-request-method',
        title: '请求方式',
    },
    {
        ref: 'nav-request-header',
        title: '请求参数headr',
    },
    {
        ref: 'nav-request-body',
        title: '请求参数body',
    },
]
export default {
    data() {
        return {
            height: 0,
            navMenu: NAV_MENU,
        }
    },



    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },

    destroyed() {
        window.removeEventListener('resize', this.setHeight)
    },

    methods: {
        /**
         * 设置容器高度
         */
        setHeight() {
            this.height = window.innerHeight - (50 + 55 + 20 + 37)
        },
        /**
         * 导航跳转
         */
        handleNavJump(ref) {
            this.$refs[ref][0].scrollIntoView(true)
        },
    },
}
</script>

<style lang="scss" scoped>
.interface-list-api-document-container {
    display: flex;
}

.api-document__nav-menu {
    position: fixed;
    display: flex;
    flex-direction: column;

    .el-button {
        text-align: right;
    }
}

.api-document__content {
    overflow-y: auto;
    margin-left: 150px;
    padding: 0 10px;
    .el-card {
        height: 300px;
    }
}
</style>