vue-directive 项目实用

v-debounce

背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
思路：

定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
将时间绑定在 click 方法上。

const debounce = {
    
    
  inserted: function (el, binding) {
    
    
    let timer
    el.addEventListener('click', () => {
    
    
      if (timer) {
    
    
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
    
    
        binding.value()
      }, 1000)
    })
  },
}
 
export default debounce

使用：给 Dom 加上 v-debounce 及回调函数即可

<template>
  <button v-debounce="debounceClick">防抖测试</button>
</template>
 
<script> export default {
    
    
  methods: {
    
    
    debounceClick () {
    
    
      console.log('只触发一次')
    }
  }
} </script>

v-permission

背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。

需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。

思路：

自定义一个权限数组
判断用户的权限是否在这个数组内，如果是则显示，否则则移除 Dom

function checkArray(key) {
    
    
// 当前所拥有的权限
  let arr = ['1', '2', '3', '4']
  let index = arr.indexOf(key)
  if (index > -1) {
    
    
    return true // 有权限
  } else {
    
    
    return false // 无权限
  }
}
 
const permission = {
    
    
  inserted: function (el, binding) {
    
    
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
    
    
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
    
    
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}
 
export default permission

使用：给 v-permission 赋值判断即可

<div class="btns">
  <!-- 显示 -->
  <button v-permission="'1'">权限按钮1</button>
  <!-- 不显示 -->
  <button v-permission="'5'">权限按钮2</button>
</div>

vue-directive 项目实用

v-debounce

v-permission

猜你喜欢