给vue封装节流的自定义命令

function throttle (method, context) {
  clearTimeout((method.tId))
  method.tId = setTimeout(function () {
   method.call(context)
  }, 100)
 }
 
 function resizeDiv () {
  var div = document.getElementById('myDiv')
  div.style.height = div.offsetWidth + 'px'
 }
 
 window.onresize = function () {
  throttle(resizeDiv)
 }

封装vue命令

<template>
 <div>
  <input
   type="text"
   v-model="text"
   v-debounce="search"
  >
 </div>
</template>
<script>
 export default {
  name: 'debounce',
  data () {
   return {
    msg: 'Welcome to Your Vue.js App',
    text: '',
    count: 1
   }
  },
  directives: {
   debounce: {
    inserted: function (el, binding) {
     let timer
     el.addEventListener('keyup', () => {
      if (timer) {
       clearTimeout(timer)
      }
      timer = setTimeout(() => {
       binding.value()
      }, 300)
     })
    }
   }
  },
  methods: {
   search () {
   // 实际要进行的操作 axios.get('')之类的
    this.count++
    console.log('count is:' + this.count)
   }
  }
 }
</script>