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

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

1. 环境配置：

vscode

TS

​ “bootstrap”: “^5.1.3”,

​ “core-js”: “^3.6.5”,

​ “vue”: “^3.0.0”,

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

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

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

1. 逻辑代码：

  setup () {
    const dropdownRef = ref(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)
    })
    onUnmounted(() => {
      document.removeEventListener('click', handler)
    })
    return {
      isOpen,
      toggleOpen,
      dropdownRef
    }
  }
})

2. 调用：

    {{title}}

@click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件，就是本来是有为了方便使用的是标签，然后由于本来有自己的内置函数href，为了阻隔触发它所以使用@click.prevent函数。

3. 运行效果:

1. 点击前：

   

2. 点击后：

   

63)]

2. 点击后：

   [外链图片转存中…(img-pGBoET9N-1642945316965)]

下一节将会更新关于点击按钮以外的部分触发菜单关闭的事件。