Vue常用指令(Directive)

Permission

/**
 * 权限指令
 * @description 和权限判断函数 checkPermission 功能类似
 */
const permission: Directive = {
        mounted(el, binding) {
            const {value: permissionRoles} = binding
            const {roles} = useUserStore()
            if (isArray(permissionRoles) && permissionRoles.length > 0) {
                const hasPermission = roles.some(role => permissionRoles.includes(role))
                if (!hasPermission) el.parentNode?.removeChild(el)
            } else {
                throw new Error('参数必须是一个数组且长度大于 0')
            }
        }
    }

自动聚焦

const focus: Directive = {
    mounted(el) {
        el.focus()
    }
}

图片懒加载

/**
 * 图片懒加载  img标签使用
 */
const lazyLoad: Directive = {
        mounted(el, binding) {
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        el.src = binding.value
                        observer.unobserve(el)
                    }
                })
            })
            observer.observe(el)
        }
    }

防抖指令

/**
 * 防抖指令
 */
const debounce: Directive = {
        mounted(el, binding) {
            const eventType = binding.arg || 'click'
            const delay = 300
            const originalHandler = binding.value
            const debouncedHandler = lodashDebounce((...args) => {
                originalHandler && originalHandler(...args)
            }, delay)
            el.__vueClickHandler__ = debouncedHandler
            el.addEventListener(eventType, debouncedHandler)
        },
        unmounted(el, binding) {
            const eventType = binding.arg || 'click'
            const originalHandler = el.__vueClickHandler__
            if (originalHandler) {
                el.removeEventListener(eventType, originalHandler)
            }
        }
    }