# vue监听元素之外的事件

**Repository Path**: adiljaan/clickOutside

## Basic Information

- **Project Name**: vue监听元素之外的事件
- **Description**: 用来监听是否出发了元素外面的鼠标事件。
- **Primary Language**: JavaScript
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2023-03-03
- **Last Updated**: 2023-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# clickOutside 组件的使用（点击元素外）

### 说明

这个是一个判断是否点击了这个元素之外的内容的自定义指令。
支持所有的鼠标事件，如：`click`、`contextmenu`、`mousedown` 、`dblclick`、`mouseup`等事件。

### 用法

1. 将 clickOutside 文件复制到 src 下的 directive 目录下。
2. 在 main.js 文件中注册该指令。

```javascript
main.js
import { clickOutside } from "@/directives/clickOutSide"
const app = createApp(App)
clickOutside(app) //这一句需要在const app = createApp(App);后面
```

3. 在需要的元素添加指令，close 为点击该元素之外的内容时调用的函数。

```javascript
<div v-clickOutside="close" eventName="click"></div>
```

#### 自定义指令

| 名称           | 是否必填 | 类型     | 可选值                                 | 默认值 | 说明                                 |
| -------------- | -------- | -------- | -------------------------------------- | ------ | ------------------------------------ |
| v-clickOutside | 是       | Function | -                                      | -      | 自定义指令，里面是需要调用的函数。   |
| eventName      | 否       | String   | DOM 的鼠标事件，如：click,mousedown 等 | click  | 元素之外触发哪个鼠标事件时调用函数。 |