Vue3组件开发——DropDown显示点击下拉菜单

最新推荐文章于 2024-10-09 16:03:02 发布

a Fang

最新推荐文章于 2024-10-09 16:03:02 发布

阅读量3.9k

点赞数

分类专栏：前端框架 VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46258465/article/details/122657817

版权

本文介绍如何在Vue3中开发一个Dropdown组件，通过TS编写点击显示下拉菜单的逻辑。环境配置包括VSCode、TS以及相关依赖。使用@click.prevent避免DOM的默认行为，实现点击显示和隐藏菜单的功能。示例展示了组件在点击前后的效果。

摘要由CSDN通过智能技术生成

Vue3组件开发——DropDown点击下拉

1. 环境配置：

vscode

“bootstrap”: “^5.1.3”,

“core-js”: “^3.6.5”,

“vue”: “^3.0.0”,

“vue-class-component”: “^8.0.0-0”

之前让它显示是直接使用的is-disabled判断就是给的一个静态的数据，下面使用TS函数来实现点击逻辑

2. 编写点击点击显示下拉菜单函数：

逻辑代码：

  setup () {
    const dropdownRef = ref<null |HTMLElement>(null)
    const isOpen = ref(false)
    const toggleOpen = () => {
      isOpen.value = !isOpen.value
    }
    const handler = (e: MouseEvent) => {
      if (dropdownRef.value) {
        console.log(dropdownRef.value)
        if (!dropdownRef.value.contains(e.target as HTMLElement) && isOpen.value) {
          isOpen.value = false
        }
      }
    }
    onMounted(() => {
      document.addEventListener('click', handler)
    })
    onUnm