vue3 + ts自定义指令-节流【模块化，工程化】

问题描述

为了把项目弄得更加规范和正式，特地选用ts进行对指令的封装

这里以自定义节流指令为例

实现过程

1.main.ts函数化

因为我们需要对app实例创建前，进行各种插件的安装和配置和执行很多自定义的函数。

很显然，如果我们使用vue官方在生成时提供的

createApp(App).use(store).use(router).mount('#app');

将会写得很长，而且无法对创建出的实例进行有效配置和模块化管理

因此，我们将main.ts中的createAPP进行函数化

import { createApp } from 'vue';
import App from './App.vue';
import setupAssets from './assets/setupAssets';
import { setupDirectives } from "./directives";
function setupApp() {
  setupAssets()

  const app = createApp(App)

  setupDirectives(app)

  app.mount('#app')
}

setupApp()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• setupAssets：在app实例创建前，首先第一步就是导入对应的样式（包括自己写的全局样式和windicss等css框架）

• 使用createApp创建出实例，并赋值给app，方便后续操作

• 执行自定义的配置——这里只列出了setupDirectives（可自行添加更多）

  • setupDirectives：将创建出来的vue实例传入函数，方便绑定指令

2.创建directives文件夹

在新建的文件夹中，创建一个index.ts文件

import { App } from 'vue';

/** 自定义vue指令 */
export function setupDirectives(app: App) {
	// 自定义的指令
}

1
2
3
4
5
6
7

3.创建自定义指令文件

因为这里我们需要创建的指令是节流指令，因此文件名称为throttle.ts

内部指令框架大概如下

import { App, Directive } from "vue";

export default function setupThrottleDriective(app:App) {
  /** 默认延迟触发时间 */
  const delay = 200;

  function throttleELfun(el:HTMLElement, value:number) {

  }

  const throttleDirective:Directive<HTMLElement> = {
    mounted(el, bingding) {
      throttleELfun(el, bingding.value)
    },
  }

  app.directive('throttle', throttleDirective)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

首先，函数整体使用函数包括，类似于闭包的思想

自定义节流指令完整代码

import { App, Directive } from "vue";

export default function setupThrottleDriective(app:App) {
  /** 定时器 */
  let timer:number = null

  function throttleELfun(el:HTMLElement, throttleTime = 200) {
    el.addEventListener('click', (event:Event) => {
      if (!timer) {
        timer = window.setTimeout(() => {
          timer = null
        }, throttleTime)
      } else {
        event?.stopImmediatePropagation()
      }
    }, true)
  }

  const throttleDirective:Directive<HTMLElement> = {
    beforeMount(el, bingding) {
      throttleELfun(el, bingding.value)
    },
  }

  app.directive('throttle', throttleDirective)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

①定义默认值（可省略）

可直接在函数内定义一个函数内的默认值

比如这里我就定义了一个默认延迟触发时间

const delay = 200

②定义处理函数

这个处理函数将会是你自定义指令的核心逻辑，这里对应的就是throttleELfun

这里函数的入参一般包括两个

• el：指令绑定的组件，类型为HTMLElement

• value：bing绑定的值，这将是传入的值

  也就是说你通过v-xxx="aaa"传入的值就是aaa

  所以，这里节流我们只需要接收一个数字即可

  当然，你这里可以传入你所需要的类型，例如v-permission中传参类型为Auth.RoleType

③定义指令执行周期

在上一步，写完你自定义指令的处理函数后，创建一个const去定义你函数执行的生命周期

注意，这里的const为Directive类型，你当然可以新增其他类型

这并没有什么很大的影响

例如，你可以这样写

Directive

④绑定指令

这时候你函数传入的app实例就有用了

app.directive('throttle', throttleDirective)

• 第一个参数为你所自定义接口的名称
• 第二个参数为你上一步定义的const，这里对应的就是throttleDirective

4.导入index

当你完成你自定义指令后，将你所写好的函数导入你之前早就已经创建好的index.ts中去

import { App } from 'vue';
import setupThrottleDriective from './throttle';

/** 自定义vue指令 */
export function setupDirectives(app: App) {
  setupThrottleDriective(app)
}
1
2
3
4
5
6
7

5.使用

直接在保存按钮添加一个v-throttle即可

使用前

使用后

为演示明显，将值调至1000