介绍

1、介绍

使用最新的vue-cli搭建脚手架，使用最新的vue-router4， 使用scss预处理器，

2、组件条目

• Button 组件
• Banner3D 组件
• 轮播图 组件
• Table 组件
• 树组件

3、vue3 自定义指令

自定义节流指令

main.ts

import { throttle }  from "./utile"
// vue3 注册自定义指令  
app.directive('throttle', {
  beforeMount(el, binding) {
    const [func, timer] = binding.value;
    el.addEventListener('click', throttle(func, timer));
  }
});

util/index.ts

// 函数的节流
export function throttle(func: Function, wait: number = 500) {
  let timer: number | null,
    previous: any = 0;
  return function anonymous(...params: any[]) {
    let now: any = new Date(),
      that: any,
      remaining = wait - (now - previous);
    if (remaining <= 0) {
      clearTimeout(timer as number);
      timer = null;
      previous = now;
      func.call(that, ...params);
    } else if (!timer) {
      timer = setTimeout(() => {
        clearTimeout(timer as number);
        timer = null;
        previous = new Date();
        func.call(that, ...params);
      }, remaining);
    }
  };
}

使用

  <a
      href="javascript:;"
      class="arrow arrow-left"
      v-throttle="[change.bind(null, 'left'), 500]"
  >
 </a>