Advertisement

Vue3组件开发:点击按钮导致弹窗显示

阅读量:

基于Vue3框架的组件开发中,实现通过点击按钮外部区域来触发弹窗事件的功能

1. 环境配置:

vscode

TS

“bootstrap”: “^5.1.3”,

“core-js”: “^3.6.5”,

“vue”: “^3.0.0”,

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

2. 代码:

useOutclick.TS

复制代码
    import { ref, onMounted, onUnmounted, Ref } from 'vue'
    const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
      const isClickOutside = ref(false)
      const handler = (e:MouseEvent) => {
    if (elementRef.value) {
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true

全部评论 (0)

还没有任何评论哟~