Vue按钮封装防抖功能

       按钮防抖一直是前端经常需要做的事情,而防抖其实更加准确的说是避免用户在较短时间内进行过快点击,从而引发一系列负面的影响。

       整个按钮组件封装的思路其实很简单,主要就是比较当前点击和上一次点击的时间差,如果时间差小于设置的值,即认为需要进行防抖处理,阻止子组件向父组件抛出click事件。同时在每一次点击之后需要记录一下时间,以便和下次点击计算时间差。具体代码如下:

Vue按钮封装防抖功能

       实际项目中对于按钮的封装不止防抖这一步,比如说本文中的el-button其实有不少属性,常用的有type,主要用来控制按钮的颜色,这个时候就可以在你的按钮组件中再添加一个type的prop,以使你的按钮组件和el-button的表现行为一致,同时拥有更好的特性。这种对于UI框架组件的二次封装常常会发生,主要是为了在开发过程中约定一些共识,比如说按钮的默认颜色,输入框中无内容时的placeholder,等等。通过简单的二次封装可以让你的项目组件更加容易管理,让组件的默认行为更加符合项目的要求。