実用的なVueカスタムブレ防止ディレクティブ

アンチシェイク機能、デフォルト200ms

/**
 * 
 * @date 
 * @description clickアンチバウンス、デフォルト200ms
 */
export default {
 bind: (el, binding) => {
		if(typeof binding.value !== 'function'){
			throw new Error('v-debounce not a function')
		}
		let timer = null
		el.addEventListener('click', () => {
			if (timer) clearTimeout(timer)
			timer = setTimeout(() => {
				binding.value()
				timer = null
			}, 200)
		})
	}
}

使用方法

<el-button v-debounce="foo"> </el-button>
import debounce from 'directive/debounce'
export default {
 directives: { debounce }
 methods: {
 foo() {
 console.log('クリックアンチスロットル機能')
 }
 }}

スロットル機能

/** * 
* @date  
* @description clickスロットル、デフォルト500ms
*/
export default { 
 bind: (el, binding) => {
 if(typeof binding.value !== 'function'){
 throw new Error('v-throttle not a function')
 } 
 let timer = null 
 el.addEventListener('click', () => {
 if (!timer) binding.value()
 timer = setTimeout(() => {
 clearTimeout(timer)
 timer = null
 }, 500)
 })
}}

使用方法

<el-button v-throttle="foo"> </el-button>
import throttle from 'directive/throttle'
export default {
 directives: { 
 throttle
 },
 methods: {
 foo() {
 console.log('スロットル機能がクリックされる')
 }
 }
}

直接v-デバウンスまたはv-スロットルは、@クリックが再びトリガされることなくトリガされる機能をバインドします。