vue3+ts悬浮三级菜单显示

amwydadw

已于 2024-01-25 23:01:10 修改

阅读量513

点赞数 2

文章标签： vue.js javascript 前端

于 2024-01-25 22:43:55 首次发布

本文链接：https://blog.csdn.net/qq_24015705/article/details/135855258

版权

先上效果图
菜单通过悬浮显示，悬浮一级显示二级，二级显示三级，这种需求平时应该也常见的。
我前面文章有写二级菜单，但是实现不是一样的，有借鉴，大家可以参考，自己写出更好的。
在这里插入图片描述

我的div嵌套可能有点多，用到定位了，三级菜单是实现了。
需要改三级菜单的位置改定位就好，这个代码可以直接拿来用的，我没用全局变量。

<template>
  <div class="nav">
                <div>三级下拉菜单</div>
                <div class="nav-box">
                 <!-- 这里的三级菜单平级我不太好做到，所以用了嵌套，一层套一层，后面的样式也是一样的。
                 方法里面的第一个参数是控制二级的，第二个参数是控制三级显示隐藏的，用v-if或v-show都可以，看个人喜好。 -->
                    <div class="one" @mouseleave="showNavFun(0, 0)" @mouseenter="showNavFun(1, 0)">
                        <div>一级菜单</div>
                        <div class="two" v-if="showNavNum.num == 1" @mouseenter="showNavFun(1, 1)"
                            @mouseleave="showNavFun(1, 0)">
                            <div>二级菜单</div>
                            <div class="three" v-if="showNavNum.num2 == 1">三级菜单</div>
                        </div>
                    </div>
                </div>
            </div>
</template>
<script setup lang="ts">
import {ref } from "vue";
//num指显示二级菜单的，num指显示三级菜单
let showNavNum = ref({ num: 0, num2: 0 });
//切换的方法
let showNavFun = (e: number, e2: number) => {
    // 这里是可以简写的，直接赋对象。
    showNavNum.value.num = e;
    showNavNum.value.num2 = e2;
    console.log(e);
}
</script>
<style scoped lang="less">
 .nav {
            background: #dcdcdc;

            .nav-box {
                background: #fff;
                padding: 10px 30px;

                .one {
                    width: 150px;
                    background: #47b6de;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .two {
                        width: 150px;
                        background: #7acae8;
                        text-align: center;
                        position: relative;

                        .three {
                            position: absolute;
                            top: 0;
                            left: 150px;
                            width: 150px;
                            background: #6fd6c2;
                            text-align: center;
                        }
                    }
                }
            }
        }
</style>