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

vue3.0出来已经有段时间的了，也与必要开始研究它了！
先看下我们要实现的效果
【vue3.0实现下拉菜单的封装】
文章图片

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

思路二:

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

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

js部分

DropDownItem.ts

/* 此处是插槽需要穿透 */.dropdowm-option.is-disabled >>> * {color: #6c757d; pointer-events: none; background-color: transparent; }

到这里这个组件就完成了。但是…我们可以看到点击整个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 = https://www.it610.com/article/false} else {isClickOutside.value = true}}}onMounted(() => {document.addEventListener("click", handler); }); onUnmounted(() => {document.removeEventListener("click", handler); }); return isClickOutside}export default useClickOutside

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