vue3创建一个响应屏幕高度变化的全局指令

1.首先在vue的项目里创建一个文件，比如src文件夹下的utiles文件夹下新建一个directiveUtils.ts。

2.使用vue的directive函数自定义一个指令，里面内容如下：

export default function(app) {
  app.directive("fouce", {    // fouce是自定义指令的名称
    mounted(el, binding) {   // el指是你调用了该指令的dom结构本身，binging指的是你调用该指令时添加的参数
      el.style.height = document.documentElement.clientHeight * 0.1  // 返回节点高度为页面尺寸的10%
      window.addEventListener("resize", () => {   // 监听页面尺寸变化
        el.style.height = document.documentElement.clientHeight * 0.1
      })
    }
  })
}

注意：这里博主使用window.addEventListener而不使用window.onresize的原因是一个指令可能会在一个同一个页面多次使用，而window.onresize在同一个页面只能执行一次，而多次使用该指令的话需要把上一次指令的window.onresize给停止或者销毁了，否则会出现异常的情况，导致指令只会有一个起作用。

3.到主文件main.ts里面将指令注册进去。

import { createApp } from "vue"
import direcU from "./utils/directiveUtils"

const app = createApp(Application)

direcU(app)

app.mount("#app")

4.接下来全局的标签上都可以使用，加上前缀v-就OK了。

<div v-fouce></div>