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组件

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

实现了同样的效果，整个组件的代码也精简了不少!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。