vue下拉菜单组件,
这篇文章主要为大家详细介绍了vue3.0实现下拉菜单的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.0出来已经有段时间的了，也与必要开始研究它了！
先看下我们要实现的效果
很常见的展开显示菜单项的内容，在vue3.0里面怎么开发，这里样式我们用的是引导程序的默认样式
思路一：
下拉列表：title= 退出：list=menuLists /
思路二：
下拉列表：title= 退出
下拉项目新建文章/下拉项目
下拉项目编辑文章/下拉项目
下拉项目个人信息/下拉项目
/下拉菜单
两种思路都行，相比较而言，第二种思路比较清晰，使用的时候知道具体的层次，也是elementUI组件开发的模式。
现在就第二种组件开发思路进行分析
DropDown.ts
模板
div class= drop down ref= dropDownRef
a
@click.prevent=toggleOpen
BTNBTN-辅助下拉列表-切换
href=# rel=外部“不跟随”
{{ title }}
/a
div class=下拉菜单:style= { display: block } v-show= iso pen
插槽/插槽
/div
/div
/模板
射流研究…部分
脚本语言
从“vue”导入{ defineComponent，ref，onMounted，onUnmounted，watch }。
导入使用单击外部来源./hooks/use click outside ；
导出默认定义组件({
名称：下拉列表，
道具：{
标题：{
类型：字符串，
必填：真，
},
},
设置（上下文){
const iso pen=ref(false)；
//vue3.0获取数字正射影像图对象的引用
const dropDownRef=ref null html元素(null)；
const toggleOpen=()={
isOpen.value=！iso笔。价值；
};
常量句柄点击=(e:鼠标事件)={
console.log(e.target， e )；
if (dropDownRef.value) {
控制台。日志(下拉参考。值)；
如果（
//包含判断节点是否包含节点
！dropdownref。价值。包含(例如，作为html元素的目标)
isOpen。值
) {
isOpen.value=false
}
}
};
onMounted(()={
//注册全局的点击事件
文档。addevent侦听器( click ，句柄click)；
});
未安装(()={
//解绑
文档。removeeventlistener( click ，句柄click)；
});
返回{
isOpen，
toggleOpen，
dropDownRef，
};
},
});
/脚本
DropDownItem.ts
模板
Li class= drop dowm-option :class= { is-disabled :disabled }
插槽/插槽
/李
/模板
样式范围
/* 此处是插槽需要穿透*/。dropdowm-option.is-disabled * {
颜色：# 6c757d
指针事件：无；
背景色：透明；
}
/风格
脚本语言
从“vue”导入{定义组件}；
导出默认定义组件({
道具：{
已禁用：{
类型：布尔型，
默认值：假的，
},
},
setup() {
return { }；
},
});
/脚本
到这里这个组件就完成了。但是…我们可以看到点击整个文件隐藏这个事件与整个组件的关联不大，因此我们可以抽取成一个钩住
useClickOutside.ts
从“vue”导入{ ref，onMounted，onUnmounted，Ref }
const useClickOutside=(element ref:ref null html element)={
const isClickOutside=ref(false)
常量处理程序=(e: MouseEvent)={
控制台。日志(元素参考。值)；
if (elementRef.value) {
如果(元素引用。价值。包含(例如，作为html元素的目标)){
isClickOutside.value=false
}否则{
isClickOutside.value=true
}
}
}
onMounted(()={
文档。addevent侦听器( click ，处理程序);
});
未安装(()={
文档。removeeventlistener( click ，处理程序);
});
返回isClickOutside
}
导出默认使用单击外部
然后再改写我们的DropDown.ts组件
//删掉之前已有的事件逻辑
脚本语言
.
const isClickOutside=useClickOutside(dropDownRef)；
/* console . log(isClickOutside . value， isClickOutside )；*/
//介绍监控方法。当数据改变时，我们将isOpen的值改为false。
watch(isClickOutside，(newValue)={
if(is open . value is click outside . value){
isOpen.value=false
}
});
.
/脚本
达到同样的效果，整个组件的代码也简化了很多！
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。