通过自定义指令来实现点击空白处关闭select弹窗的功能

// 在全局main.js中注册自定义指令
import { createApp } from 'vue'

const app = createApp({})

app.directive('click-outside', {
  mounted(el, binding) {
    const onClickOutside = (event) => {
      if (!el.contains(event.target) && el !== event.target) {
        binding.value()
      }
    }

    document.addEventListener('click', onClickOutside)

    el._clickOutside = onClickOutside
  },
  beforeUnmount(el) {
    document.removeEventListener('click', el._clickOutside)
    delete el._clickOutside
  }
})

// 在组件中使用自定义指令



                    
                    

你可能感兴趣的:(vue3,setup,语法糖,前端)