vue3.0自定义指令封装 perfectScroll、防抖、节流

一、定义指令钩子生命周期和钩子参数

1.指令钩子生命周期

2.指令钩子的钩子参数

二、定义及使用自定义指令

1 定义指令v-scroll 使用perfectScroll

import {App,Directive} from "vue"
import PerfectScrollbar from 'perfect-scrollbar';
//对应的css
import 'perfect-scrollbar/css/perfect-scrollbar.css';

/**
 *  在使用perfect-scrollbar之前
 应满足以下要求。
 
 容器必须具有position样式。
 容器必须是普通容器元素。

 以下要求包含在基本CSS中，但是当您想更改CSS文件时请记住。
 容器必须具有overflow: hidden   css样式。
 滚动条的位置必须是absolute。
 scrollbar-x必须有bottom或top，而scrollbar-y必须有right或left。
 */
 const el_scrollBar = (el:any) => {
  if (el._ps_ instanceof PerfectScrollbar) {
    el._ps_.update(); // 此时 el._ps_  已经存在update()方法 原型链查找
  } else {
    el._ps_ = new PerfectScrollbar(el, {
      // 对象中传入配置项
      // suppressScrollX: false, //当设置为true时，X轴上的滚动条将不可用，无论内容宽度如何。
      //suppressScrollY :false, //当设置为true时，Y轴上的滚动条将不可用，无论内容宽度如何。
      // wheelSpeed:1, // 应用于鼠标的滚动速度
      // wheelPropagation: false, //当设置为true时,滚动到达边的末端时，鼠标滚轮事件将被传播到父元素。
      // swipeEasing:true , // 当设置为true时,滑动滚动将是缓动动画
      // minScrollbarLength :null, // 当设置为整数值时，滚动条的拇指部分将不会缩小到该像素数以下。
      // maxScrollbarLength :null, // 当设置为整数值时，滚动条的拇指部分将不会超过到该像素数。
      // scrollingThreshold :1000, // 设置鼠标在悬停时停留的时间，单位为毫秒数。
      // scrollXMarginOffset :0, //在不启用X轴滚动条的情况下，内容宽度的像素数可以超过容器宽度。允许一些“摆动空间”或“偏移中断”，这样X轴滚动条就不会因为几个像素而被启用。
      // scrollYMarginOffset: 0, // 在不启用Y轴滚动条的情况下，内容高度的像素数可以超过容器高度。允许一些“摆动空间”或“偏移中断”，这样Y轴滚动条就不会因为几个像素而被启用。
    })
  }
}
 export default function scrollbarDirective(Vue:App) {
  const scrollbarDirective:Directive<HTMLElement> = {
    mounted(el:HTMLElement) {
      const rules = ['fixed', 'absolute', 'relative', 'sticky'];
      if (!rules.includes(window.getComputedStyle(el, null).position)) {
        console.error(
          `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join('、')}`
        );
      }
      el_scrollBar(el);
    },

    unmounted(el:any) {
      el._ps_.destroy();
      // eslint-disable-next-line no-param-reassign
      el._ps_ = null;
    }
  }
  Vue.directive('scrollbar', scrollbarDirective)
 }

2. 定义节流指令

import {App,Directive} from "vue";
let timer:any =null;
// 节流指令 一段时间内只执行一次
export default function throttleDirective(Vue:App) {
  const throttleDirective:Directive<HTMLElement> = {
    beforeMount(el:HTMLElement,binding) {
      
      el.addEventListener('click',(event:Event) => {
        const delayTime = binding.value;
        if(!timer) {
          timer = setTimeout(() => {
            console.log('节流节流');
            timer = null
            clearTimeout(timer)
          },delayTime)
        } else {
          event?.stopImmediatePropagation() // 阻止事件冒泡
        }
      })
     
    }
  }
  Vue.directive('throttle',throttleDirective)
}

3.定义防抖指令

import {App,Directive} from "vue";
let timer:any =null;
// 节流指令 一段时间内只执行一次
export default function throttleDirective(Vue:App) {
  const throttleDirective:Directive<HTMLElement> = {
    beforeMount(el:HTMLElement,binding) {
      
      el.addEventListener('click',(event:Event) => {
        const delayTime = binding.value;
        if(!timer) {
          timer = setTimeout(() => {
            console.log('节流节流');
            timer = null
            clearTimeout(timer)
          },delayTime)
        } else {
          event?.stopImmediatePropagation() // 阻止事件冒泡
        }
      })
     
    }
  }
  Vue.directive('throttle',throttleDirective)
}

三、全局引入

在main.ts中引入

import Scrollbar from './scrollbar';

const app = createApp(App)

Scrollbar(app)
app.mount("#app")