vue自定义指令防抖、节流、超出省略号

新建自定义指令文件

• 防抖

import Vue from 'vue'

/**
 * 防抖 就是指触发事件后在  特定间隔内 函数只能执行一次，如果在时间间隔内又触发了事件，则会重新计算函数执行时间
 * 三个入参 响应函数名 时长 绑定事件名
 *  v-debounce="['addF',3000,'click']"
 */
Vue.directive('debounce', {
  inserted: function(el, bindingObj) {
    // let timer // 定义计时器对象
    let flag
    const [fn, time = 3000, attr = 'click'] = bindingObj.value // 解构取值 时间默认3000毫秒 绑定事件默认click
    el.addEventListener(attr, () => {
      if (!flag) {
        flag = true
        fn()
      }
      setTimeout(() => {
        flag = false
      }, time)
    })
  }
})

• 节流

/**
 * 节流  持续触发某个事件 特定时间间隔内只执行一次
 * 三个入参 响应函数名 时长 绑定事件名
 *  v-throttle="['addF',3000,'click']"
 */
Vue.directive('throttle', {
  inserted: function(el, bindingObj) {
    let flag, timer
    const [fn, time = 3000, attr = 'click'] = bindingObj.value // 解构取值 时间默认3000毫秒 绑定事件默认click
    el.addEventListener(attr, () => {
      if (flag) {
        // 还没清除又触发了   就中断执行return false  重新倒计时
        clearTimeout(timer)
        timer = setTimeout(() => fn(), time)
        return false
      }
      fn()
      flag = setTimeout(() => (flag = null), time) // 触发后 规定时间间隔 将flag清除
    })
  }
})

• 超出自动省略号

  /**
   * 文字超出省略  使用该指令当文字内容超出宽度（默认 100 px）时自动变为省略形式
   */
  Vue.directive('ellipsis', {
    bind: function(el, binding) {
      el.style.width = (binding.value || 100) + 'px'
      el.style.whiteSpace = 'nowrap'
      el.style.overflow = 'hidden'
      el.style.textOverflow = 'ellipsis'
    }
  }

  引入

//main.js
import Vue from 'vue'


//引入
import directive from './directive' // directive


//全局使用
Vue.use(directive)


//挂载
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用

<div slot="footer" class="dialog-footer">
    <el-button v-debounce="[submitForm, 1000]" type="primary">确 定</el-button>
    <el-button v-debounce="[cancel, 1000]">取 消</el-button>
</div>