vue3.0如何实现下拉菜单的封装

小编给大家分享一下vue3.0如何实现下拉菜单的封装，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

先看下我们要实现的效果

很常见的展开显示菜单项的内容，在vue3.0里面怎么开发，这里样式我们用的是bootstrap的默认样式

思路一:

思路二:

   新建文章   编辑文章   个人信息

两种思路都行，相比较而言，第二种思路比较清晰，使用的时候知道具体的层次，也是elementUI组件开发的模式.
现在就第二种组件开发思路进行分析

DropDown.ts

js部分

DropDownItem.ts

到这里这个组件就完成了。但是…我们可以看到点击整个document隐藏这个事件与整个组件的关联不大，因此我们可以抽取成一个hooks

useClickOutside.ts

import { ref, onMounted, onUnmounted,Ref } from 'vue'const useClickOutside = (elementRef:Ref) => {    const isClickOutside = ref(false)    const handler = (e: MouseEvent) => {        console.log(elementRef.value);        if (elementRef.value) {            if (elementRef.value.contains(e.target as HTMLElement)) {                isClickOutside.value = false            } else {                isClickOutside.value = true            }        }    }    onMounted(() => {      document.addEventListener("click", handler);    });    onUnmounted(() => {      document.removeEventListener("click", handler);    });    return isClickOutside}export default useClickOutside

然后再改写我们的DropDown.ts组件

//删掉之前已有的事件逻辑

看完了这篇文章，相信你对"vue3.0如何实现下拉菜单的封装"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！