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

记忆怪 bug

于 2023-07-28 13:10:53 发布

阅读量523

点赞数

分类专栏： vue3 setup 语法糖文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_66051368/article/details/131978022

版权

vue3 setup 语法糖专栏收录该内容

9 篇文章

订阅专栏

该文章展示了如何在Vue应用中全局注册一个名为click-outside的自定义指令，用于在元素外部点击时触发特定回调函数。在组件中，这个指令被应用于el-select元素，当点击元素外部时关闭select弹窗。文章详细描述了指令的生命周期钩子，如mounted和beforeUnmount，以及事件监听的添加和移除过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 在全局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
  }
})

</script>

// 在组件中使用自定义指令
<template>
  <div>
    <el-select  v-click-outside="closeSelect">
      <!-- select options -->
    </el-select>
  </div>
</template>

<script setup>
    const closeSelect=()=> {
      // 关闭select弹窗的逻辑
    }
}