Vue指令directives v-

指令

自定义指令

csdn学习资料

只有当所需功能只能通过直接DOM操作来实现时，才应该使用自定义指令。

常见场景： 防抖，节流，拖动，滑动，元素尺寸发生变化时，权限判断

防抖代码

// 1.设置v-debounce自定义指令
Vue.directive('debounce', {
  bind: (el, binding) => {
    let debounceTime = binding.value; // 防抖时间
    if (!debounceTime) { // 用户若不设置防抖时间，则默认2s
      debounceTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, debounceTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-debounce自定义指令
<button @click="sayHello" v-debounce>提交</button>

权限判断代码

<template>
    <div class="hasbtn" v-has-all="'add,edit,delete,see,upload,download'">
        <div class="btn" v-has="'add'">新增</div>
        <div class="btn" v-has="'edit'">编辑</div>
        <div class="btn" v-has="'delete'">删除</div>
        <div class="btn" v-has="'see'">查看</div>
        <div class="btn" v-has="'upload'">上传</div>
        <div class="btn" v-has="'download'">下载</div>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from "vue";

const state = reactive({
    userPower: ['add', 'edit'], // 模拟用户所拥有的权限
    admin: false, // 该用户是否是超级管理员
})
const { } = toRefs(state)

onMounted(() => {

})

// 判断单个按钮权限方法
const hasPermission = (userPermission: any) => {
    let permissionList = state.userPower
    return permissionList.some((i: any) => i == userPermission)
};
// 判断单个按钮权限指令
const vHas = {
    mounted(el: any, binding: any) {
        if (state.admin) { // 当用户是超级管理时，拥有所有按钮的权限
            return true
        } else {
            if (!hasPermission(binding.value)) {
                // 如果用户没有某个权限移除改元素
                el.parentNode.removeChild(el);
            }
        }
    },
}

// 判断按钮组权限方法
const hasAllPermission = (userPermission: any) => {
    let data = userPermission.split(",")
    return hasOneItemInCommon(data, state.userPower)
}
// 判断按钮组权限指令
const vHasAll = {
    mounted(el: any, binding: any) {
        if (state.admin) { // 当用户是超级管理时，拥有所有按钮的权限
            return true
        } else {
            if (!hasAllPermission(binding.value)) {
                // 如果用户没有某个权限移除改元素
                el.parentNode.removeChild(el);
            }
        }
    },
}

const hasOneItemInCommon = (arr1: any, arr2: any) => {
    for (const item of arr2) {
        if (arr1.includes(item)) {
            return true;
        }
    }
    return false;
};
</script>

<style scoped lang="scss">
.hasbtn {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
        width: 120px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        background: #409EFF;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 20px;
    }
}
</style>

指令和hook的区别

1.作用机制：Vue指令主要用于模板操作和事件绑定，而Hook则是通过JavaScript函数来管理状态和逻辑。 2.使用场景：Vue指令适用于简单的DOM操用和事件处理，而Hook适用于复杂的逻辑复用的状态管理。