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