# lazy-click

> lazy-click

Latest version **1.0.2** (published 2019-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install lazy-click
pnpm add lazy-click
yarn add lazy-click
bun add lazy-click
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-08-06 |
| First published | 2019-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 290.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | roy |
| Maintainers | goded_v |

## Links

- npm: https://www.npmjs.com/package/lazy-click
- npm.io page: https://npm.io/package/lazy-click

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## Recent versions

- 1.0.2 (latest) — 2019-08-06
- 1.0.1 — 2019-08-06
- 1.0.0 — 2019-08-06

## README

# lazyClick



## 介绍
```bush
此组件主要用于点击事件，目的在于让点击事件在一段事件，在一段事件内只调用一次，起到防止重复点击的作用。
```

## 安装
```bush
// install dependencies
npm install
```

### 使用步骤

1.引入lazyClick

```javascript
import lazyClick from 'lazyClick
```

2.在main.js中全局注册自定义指令

```javascript
Vue.directive('lazyClick', lazyClick)
```

3.在vue的template中绑定自定义指令

```javascript
<div v-lazyClick:3000="refreshView">刷新</div>
```

### 使用指南

1.设置防止重复点击的时间。

在dom中的  先绑定v-lazyClick（使用步骤第二步，全局注册的lazyClick），在v-lazyClick后加 “：”  ，冒号后跟所需要设置的时间，单位ms。再接着绑定点击事件所需要执行的方法，如：

```javascript
<div v-lazyClick:5000="refreshView">刷新</div>
```

上面所达到的效果就是，让此div在点击后的5000ms内，不能被重重点击。如果设置时间，默认1000ms。如下：

```javascript
<div  v-lazyClick="refreshView">刷新</i-button>
```

2.点击事件传递参数

```javascript
<div v-lazyClick="{fn:refreshView,params:{a:'1'}}">刷新</div>
```

其中fn为所需要绑定发的方法，params为方法所需要传递的参数。

然后再本页面的refreshView方法中接收该参数即可。如下：

```javascript
refreshView(params) {  
    console.log(params) // {a: "1"}},
}
```

3.阻止事件冒泡

在v-lazyClick后加上.stop的修饰符。如下：

```javascript
<div v-lazyClick.stop="{fn:refreshView,params:{a:'1'}}">刷新</div>
```

4.阻止默认事件

在在v-lazyClick后加上.prevent的修饰符。如下：

```javascript
<div v-lazyClick.prevent="{fn:refreshView,params:{a:'1'}}">刷新</div>
```

5.回调函数

此组件提供了一个事件失效结束后的回调函数callBackFn（注意名字一定要写对，使用方法同fn，回调函数接收一个el参数），用于用户定制一些按键失效后的过度过程。一般在fn中写点击事件开始的逻辑及样式，callBackFn中写按键恢复正常的样式。如下：

```javascript
<div type="primary"  v-lazyClick="{fn:refreshView,callBackFn:callback}">刷新</div>
```

其中callback为恢复恢复正常的回调函数。

### 属性方法

| 修饰符 |                           功能说明                           |                             事例                             |
| :---------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
|     ：      |            传递延迟的时间，默认1000ms。单位：ms。            |               v-lazyClick：2000=“refreshView”                |
|    stop     |                         阻止事件冒泡                         |                       v-lazyClick.stop                       |
|   prevent   |                         阻止默认事件                         |                     v-lazyClick.prevent                      |

| 参数 |                           功能说明                           |                             事例                             |
| :---------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
|     fn      |                     事件开始时执行的方法                     |                v-lazyClick="{fn:refreshView}"                |
|   params    |          事件开始开始时传递的参数，配合fn一起使用。          | v-lazyClick.prevent="{fn:refreshView,params:{a:'1'}}"（无参数传递采用简写：v-lazyClick="refreshView"） |
| callBackFn  | 延迟结束后的回调函数，配合fn一起使用。在对应绑定的方法中可接收el参数。 |      v-lazyClick="{fn:refreshView,callBackFn:callback}"      |

---
_Source: https://npm.io/package/lazy-click · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._