Vue3 v-click-outside的安装和使用详解

20 min read

v-click-outside是一个Vue3的指令，用于监听页面点击事件，并在元素外点击时触发指定的回调函数。它的安装和使用方法如下：

安装：

  1. 通过npm安装v-click-outside包：npm install v-click-outside
  2. 在你的Vue项目的入口文件（通常是main.js）中导入和使用v-click-outside：
import { createApp } from 'vue'
import App from './App.vue'
import vClickOutside from 'v-click-outside'

const app = createApp(App)
app.use(vClickOutside)
app.mount('#app')

使用：
在需要使用v-click-outside指令的元素上添加v-click-outside指令，并通过@clickOutside监听外部点击事件：

<template>
  <div v-click-outside @clickOutside="onClickOutside">
    <!-- 需要监听外部点击的元素内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    onClickOutside() {
      // 外部点击时的回调函数
    }
  }
}
</script>

你也可以将v-click-outside指令绑定到组件的根元素上，以监听整个组件外部的点击事件。

注意事项：

  • v-click-outside指令只在元素外点击时触发回调函数，点击元素本身不会触发回调函数。
  • v-click-outside指令只能绑定到具有定位属性（例如position: absolute或position: relative）的元素上，否则无法正确计算元素的位置。
  • 如果需要在某个元素上切换显示/隐藏的状态，可以在回调函数中更新对应的变量进行控制。