欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue中使用防抖函數(shù)組件操作

 更新時間:2020年07月26日 14:03:05   作者:userkang  
這篇文章主要介紹了在vue中使用防抖函數(shù)組件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

初級

1、先寫好防抖函數(shù)

/**
 * @desc 防抖函數(shù)
 * @param {需要防抖的函數(shù)} func
 * @param {延遲時間} wait
 * @param {是否立即執(zhí)行} immediate
 */
export function debounce(func, wait, immediate) {
 let timeout
 
 return function(...args) {
 let context = this
 if (timeout) clearTimeout(timeout)

 if (immediate) {
 let callNow = !timeout
 timeout = setTimeout(function() {
 timeout = null
 }, wait)
 if (callNow) func.apply(context, args)
 } else {
 timeout = setTimeout(function() {
 func.apply(context, args)
 }, wait)
 }
 }
}

2、然后在要使用的組件里 import 進來

import { debounce } from 'xxx'

export default {
 data: {
 return {
 vm: this
 }
 },
 methods: {
 toDoSth: debounce((vm) => {
 // 這里將當前組件實例當參數(shù)傳入
 // 就可以使用實例中定義的一些屬性、方法
 // 補充一下,這里如果換成非箭頭函數(shù)的寫法,也可以直接訪問實例。
 }, 
 500, 
 true
 )
 }
}

3、在組件方法中使用

template:

<div @click="toDoSth(vm)"></div>

高級

雖然上面的寫法已經(jīng)能解決問題了,但是總覺得不夠美觀。

在網(wǎng)上搜索一番,看到有個哥們將防抖封裝成一個組件,果然和我想的一樣。不過這哥們直接將上下文當參數(shù)傳進來了,比我把整個實例傳進來高明,我在這個基礎(chǔ)上添加了 immediate 的功能,還有添加了默認不傳 event 參數(shù)的情況處理。

debounce.js 文件:

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
 let timer
 const rtn = (...params) => {
 clearTimeout(timer)

 if (immediate) {
 let callNow = !timer
 timer = setTimeout(() => {
 timer = null
 }, time)
 if (callNow) func.apply(ctx, params)
 } else {
 timer = setTimeout(() => {
 func.apply(ctx, params)
 }, time)
 }
 }
 return rtn
}

Vue.component('Debounce', {
 abstract: true,
 props: ['time', 'events', 'immediate'],
 created() {
 this.eventKeys = this.events && this.events.split(',')
 },
 render() {
 const vnode = this.$slots.default[0]
 
 // 如果默認沒有傳 events,則對所有綁定事件加上防抖
 if (!this.eventKeys) {
 this.eventKeys = Object.keys(vnode.data.on)
 }
 
 this.eventKeys.forEach(key => {
 vnode.data.on[key] = debounce(
 vnode.data.on[key],
 this.time,
 vnode,
 this.immediate
 )
 })

 return vnode
 }
})

使用方式:

1、引入 debounce.js 文件

import 'xxx/debounce.js'

export default {
 methods: {
 toDoSth(e) {
 // 這里正常寫就可以了
 }
 }
}

2、在模版里使用。

其中time為必選參數(shù)。 event 和 immediate 參數(shù)都是可選參數(shù)。

如果組件下有多個事件綁定,那么 event 可以自定義需要進行防抖處理的事件。

如果需要立即執(zhí)行的話,可以將 immediate 參數(shù)設(shè)置為 true。

<Debounce :time="500" event="click" :immediate="true">
 <button @click="toDoSth($event, 1)">click me</button>
</Debounce>

到此就完成了一次 Debounce 組件的封裝。

補充知識:vue防抖函數(shù),避免暴力點擊

1.vue項目/src/components/directive/clickAgain.js

import Vue from 'vue'

const clickAgain = Vue.directive('clickAgain',{
 // 指令的定義
 bind(el, binding, vnode, oldVnode) {
  // 綁定this
  let self = vnode.context;
  el.onclick = function (e) {
   if (self._is_click) {
    return false;
   }
   /*執(zhí)行指令綁定的事件*/
   self[binding.expression]()
   self._is_click=true;
   setTimeout(()=>{
    self._is_click=false;
   },2000)

  };
 }
});
export default clickAgain

2.在main.js 引入

import clickAgain from './components/directive/clickAgain.js'

/* 引入避免暴力雙擊點擊*/

Vue.use(clickAgain);

3.使用

<a-button key="submit" type="primary" :loading="false" v-clickAgain="handleOk">
 保存
</a-button>

以上這篇在vue中使用防抖函數(shù)組件操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文帶你深入理解Vue3中Composition API的使用

    一文帶你深入理解Vue3中Composition API的使用

    Composition API 是 Vue 3 中的一項強大功能,它改進了代碼組織和重用,使得構(gòu)建組件更加靈活和可維護,本文我們將深入探討 Composition API 的各個方面,希望對大家有所幫助
    2023-10-10
  • 基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例

    基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例

    這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2020-03-03
  • 使用Vue實現(xiàn)防篡改的水印

    使用Vue實現(xiàn)防篡改的水印

    我們在平時上網(wǎng)的時候會看到有些圖片是加水印的,一般水印往往是后端來做的,不過有些站點要保護的知識產(chǎn)權(quán)類型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個適當?shù)南拗?本文就給大家介紹一下如何使用Vue實現(xiàn)防篡改的水印
    2023-08-08
  • 詳解Vue.js分發(fā)之作用域槽

    詳解Vue.js分發(fā)之作用域槽

    本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • Ant design vue table 單擊行選中 勾選checkbox教程

    Ant design vue table 單擊行選中 勾選checkbox教程

    這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue.js暴露方法給WebView的使用操作

    Vue.js暴露方法給WebView的使用操作

    這篇文章主要介紹了Vue.js暴露方法給WebView的使用操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法

    vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法

    這篇文章主要介紹了vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法

    Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法

    這篇文章主要介紹了Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法,文中通過代碼示例講解的講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2024-10-10
  • vue實現(xiàn)修改標簽中的內(nèi)容:id class style

    vue實現(xiàn)修改標簽中的內(nèi)容:id class style

    這篇文章主要介紹了vue實現(xiàn)修改標簽中的內(nèi)容:id class style,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法

    vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法

    這篇文章主要為大家詳細介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07

最新評論