VUE手写子级导航

最新推荐文章于 2024-10-17 09:40:47 发布

qq_45944328

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量159

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45944328/article/details/125536686

版权

这个博客展示了如何使用Vue.js创建一个水平布局的图书馆导航组件。组件包括多个父级条目，每个条目下有子级条目。通过点击父级条目可以切换子级条目的显示与隐藏，并且改变了选中项的图标和文字颜色。代码中使用了Vue的`v-for`指令、事件监听、过渡动画和状态管理来实现交互效果。

摘要由CSDN通过智能技术生成

子级导航

<template>
    <div class="horizontal-library">
        <ul>
            <li v-for="(item, id) in items" :key="id" ref="lists" @click="changeColor(id)">
                <div class="list-library" @click="openList(id)">
                    <div class="listLibraryLeft">
                        <!-- 更换icon图标 -->
                        <div><i :class="item.icon"></i></div>
                        <span :class="baseLibr == id ? 'changeBaseLibrary' : ''">
                            {{ item.name }}
                        </span>
                    </div>
                    <div class="library">
                        <span :class="libr == id ? 'changeLibr' : ''">{{ item.number + '库' }}</span>
                    </div>
                </div>
                <ul>
                    <transition-group>
                        <li v-for="(itemCar, carId) in item.car" :key="carId" v-show="open == id ? closeList(id) : false" @click="changeTextColor(itemCar.id)">
                            <div class="carFlexBox">
                                <div>
                                    <span :class="changeText == itemCar.id ? 'textColor' : ''">{{ itemCar.carInfo }}</span>
                                </div>
                                <div>
                                    <span>{{ itemCar.numberOfCarInfo + '条' }}</span>
                                </div>
                            </div>
                        </li>
                    </transition-group>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [
                {
                    id: 1,
                    name: '基础库',
                    number: '3',
                    car: [
                        { id: 2, carInfo: '过车记录', numberOfCarInfo: '300', icon: 'el-icon-sunny' },
                        { id: 3, carInfo: '车辆信息', numberOfCarInfo: '3000', icon: 'el-icon-sunny' }
                    ],
                    icon: 'el-icon-cloudy'
                },
                {
                    id: 4,
                    name: '基础库',
                    number: '4',
                    car: [
                        { id: 5, carInfo: '过车记录', numberOfCarInfo: '400', icon: 'el-icon-sunny' },
                        { id: 6, carInfo: '车辆信息', numberOfCarInfo: '4000', icon: 'el-icon-sunny' }
                    ],
                    icon: 'el-icon-sunrise'
                },
                {
                    id: 7,
                    name: '基础库',
                    number: '5',
                    car: [
                        { id: 8, carInfo: '过车记录', numberOfCarInfo: '500', icon: 'el-icon-sunny' },
                        { id: 9, carInfo: '车辆信息', numberOfCarInfo: '5000', icon: 'el-icon-sunny' }
                    ],
                    icon: 'el-icon-sunrise-1'
                },
                {
                    id: 10,
                    name: '基础库',
                    number: '6',
                    car: [
                        { id: 11, carInfo: '过车记录', numberOfCarInfo: '600', icon: 'el-icon-sunny' },
                        { id: 12, carInfo: '车辆信息', numberOfCarInfo: '6000', icon: 'el-icon-sunny' }
                    ],
                    icon: 'el-icon-sunset'
                }
            ],
            // 修改icon图标
            // changeI: -1,
            // 修改icon背景颜色
            iconIndex: true,
            baseLibr: -1,
            libr: -1,
            changeText: -1,
            open: -1,
            openId: -1,
            ctrl: false
        }
    },
    methods: {
        changeColor(index) {
            this.changeI = this.baseLibr = this.libr = index
        },
        changeTextColor(index) {
            this.changeText = index
            // console.log(this.changeText)
        },
        openList(index) {
            this.open = index
            this.ctrl = !this.ctrl
            // console.log(this.open)
        },
        closeList(index) {
            this.openId = index
            return this.ctrl
        }
        // changeIcon(item, id) {
        //     // console.log(id)
        //     // console.log(item)
        //     // console.log(item.icon)
        //     this.changeI = id
        //     return 'el-icon-sunny'
        // }
    },
    watch: {
        openId: {
            handler(n, o) {
                if (n !== o) {
                    this.ctrl = true
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/variable.scss';
// 过渡动画样式
.v-enter {
    height: 0;
    overflow: hidden;
}
.v-enter-active {
    transition: all 0.5s;
}
.v-enter-to {
    height: 44px;
    overflow: hidden;
}
.v-leave {
    height: 44px;
    overflow: none;
}
.v-leave-active {
    transition: all 0.5s;
}
.v-leave-to {
    height: 0;
    overflow: hidden;
}
// 点击变化的样式
.iconColor {
    background-color: $primary4;
}
.changeBaseLibrary {
    font-size: 16px;
    line-height: 24px;
    color: $black3;
}
.changeLibr {
    font-size: 14px;
    line-height: 22px;
    color: $black3;
}
.textColor {
    color: $primary4 !important;
}
// 默认样式
.horizontal-library {
    ul {
        border-top: 1px solid $border;
        cursor: pointer;
        .list-library {
            justify-content: space-between;
            display: flex;
            width: 280px;
            height: 54px;
            padding: 0 16px 0 16px;
            border: 1px solid $border;
            border-bottom: 0;
            border-top: 0;
            background-color: $background;
            align-items: center;
            .listLibraryLeft {
                display: flex;
            }
            div {
                font-size: 16px;
                line-height: 24px;
                color: $black3;
            }
            .library {
                font-size: 14px;
                line-height: 22px;
            }
        }
        li {
            ul {
                li {
                    .carFlexBox {
                        justify-content: space-between;
                        display: flex;
                        height: 44px;
                        padding: 0 15px 0 48px;
                        border: 1px solid $border;
                        border-bottom: 0;
                        div {
                            align-items: center;
                            display: flex;
                            height: 40px;
                            span {
                                font-size: 14px;
                                line-height: 22px;
                                color: $black3;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>