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>

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

【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
java全景图片生成_[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果...
[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果 0 2015-07-23 18:00:14 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们 ...
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
在线演示本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打 ...
vue中 div高度随另一个div的高度变化
最近做了好几个项目,终于把手里的事情干完了,趁着这几天比较空整理一下最近遇到的一些问题以及解决方案. 问题描述: in-wrap的高度不固定,会随着内容的多少改变,而out-wrap的高度则需要跟随i ...
python怎么让按钮透明_python – 如何创建一个响应Tkinter中的click事件的透明矩形...
我需要在tkinter.canvas中绘制一个矩形来响应click事件: click_area = self.canvas.create_rectangle(0,0,pa_width,pa_heigh ...
从零开始创建一个Android主屏幕Widget
登录 / 注册 IT168首页手机整机 DIY硬件摄影消费数码数字家电企业IT 企业商用办公互动社区全部频道 IT168技术开发频道 IT168首页 > 技术开发 > ...
使用 Vanilla JavaScript 框架创建一个简单的天气应用
大家好,不知道大家听说过 Vanilla JavaScript 这款框架吗?最近我在浏览国外的一些技术网站时,这个词出现的频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScrip ...
一个Servlet同一时刻只有一个实例。当多个请求发送到同一个Servlet，服务器会为每个请求创建一个新线程来处理。
Servlet是一种独立于操作系统平台和网络传输协议的服务器端的Java应用程序. 相同点: 1. 不是独立的应用程序,没有main()方法. 2. 不是由用户调用,由另一个应用程序(容器)调用 ...
Docker创建一个java程序镜像
Docker创建一个java程序镜像什么是Dockerfile 指令及其说明个人镜像创建流程 Dockerfile文件创建使用docker build命令构建镜像运行镜像附文件目录结构什么 ...

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

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

最新文章

热门文章