lazy-click v1.0.2

lazyClick

介绍

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

安装

// install dependencies
npm install

使用步骤

1.引入lazyClick

import lazyClick from 'lazyClick

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

Vue.directive('lazyClick', lazyClick)

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

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

使用指南

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

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

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

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

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

2.点击事件传递参数

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

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

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

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

3.阻止事件冒泡

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

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

4.阻止默认事件

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

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

5.回调函数

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

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

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

属性方法