xiaoshu/src/components/Slider.vue

<template>
    <main>
        <header @click="handleClick(-1)">
            <img src="@/assets/slider/logo.svg" />
        </header>
        <section>
            <div v-for="(item, key) in slider" :key="key" @click="handleClick(key)" :class="{ active: key === index }">
                <div>
                    <img :src="getAssetURL(`/src/assets/slider/${item.icon}.svg`)" width="24" class="img-normal" />
                    <img :src="getAssetURL(`/src/assets/slider/${item.icon}-1.svg`)" width="24" class="img-hover" />
                    <p>{{ item.title }}</p>
                </div>
            </div>
        </section>
        <footer>
            <div style="background-color: rgb(255, 110, 110)">{{ userName.slice(0, 1) }}</div>
            <p>{{ userName }}</p>
        </footer>
    </main>
</template>
<script>
import { defineComponent, inject, onMounted, ref } from "vue";
export default defineComponent({
    props: ["index"],
    setup(props, { emit }) {
        const { helper, config } = inject("$global");
        const userName = ref("vickeryvickeryvickery");
        const handleClick = (index) => {
            emit("select-nav", index);
        };
        return {
            slider: config.slider,
            getAssetURL: helper.getAssetURL,
            userName,
            handleClick
        };
    }
});
</script>
<style lang="scss" scoped>
main {
    padding: 20px 0;
    width: 100px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    > header {
        cursor: pointer;
        > img {
            display: block;
            width: 62px;
            margin: 0 auto;
        }
    }
    > section {
        flex: 1;
        margin-top: 27px;
        > div {
            margin: 0 auto;
            width: 70px;
            height: 70px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            .img-normal {
                display: block;
            }
            .img-hover {
                display: none;
            }
            &:hover,
            &.active {
                background: rgba(0, 0, 0, 0.05);
                .img-normal {
                    display: none;
                }
                .img-hover {
                    display: block;
                }
            }
            img {
                display: block;
                margin: 0 auto;
            }
            p {
                font-size: 13px;
                margin-top: 2px;
                color: rgb(51, 51, 51);
            }
        }
    }
    > footer {
        margin: 0 auto 30px;
        padding: 0 10px;
        width: 80px;
        > div {
            margin: 0 auto;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        > p {
            margin-top: 5px;
            width: 100%;
            text-align: center;
            word-wrap: break-word;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>