本文已参与「新人创作礼」活动，一起开启掘金创作之路

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

调用：

    <a href="#" class="btn btn-outline-light my-2 dropdown-toggle"   @click.prevent="toggleOpen">{{title}}</a>

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

3. 运行效果:

点击前：
点击后：

63)]

点击后：

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

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

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

1. 环境配置：

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

3. 运行效果: