Vue 实现一个下拉菜单

前言

有时候我们需要去自定一个下拉菜单，这个时候就得自己撸css了

先来看demo

demo.gif

实现

其他的不相关的代码，这里就删掉了

说明

通过给屏幕点击事件判断是否需要隐藏下拉菜单

document.onclick = () => {
                if (this.isShow) {
                    this.isShow = false;
                }
            };

下拉菜单的点击事件需要使用@click.stop阻止冒泡。

@click.stop="didClickMenus"

下面这个是li的下划线

.item-normal::after