vue3自定义hooks

获取dom的id属性

index.ts

import { onMounted } from "vue"
type option = {el: string
}export default function(option:option):Promise<{name: string}> {return new Promise((resolve)=>{onMounted(()=>{const dom:HTMLElement = document.querySelector(option.el) as HTMLDivElement;resolve({name: dom.id})})})
}

使用

<template><div class="ad"></div>
</template>
<script setup lang="ts">
//hooks 的工具库 vueuse
import getId from './hooks/index';
getId({el: '.ad'
}).then(res => {console.log(res);
})
</script>
获取dom的大小
function useResize(el: HTMLElement, callback: (cr: DOMRectReadOnly, resize: ResizeObserver) => void) {let resize: ResizeObserverresize = new ResizeObserver((entries) => {for (let entry of entries) {const cr = entry.contentRect;callback(cr, resize)}});resize.observe(el)
}export default useResize

使用

onMounted(() => {useResize(document.querySelector('#ad') as HTMLElement, (e) => {console.log(e);})
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chrome添加扩展程序

Crx4Chrome 下载crx 打开扩展程序 如果拖动crx文件到扩展程序提示只能通过Chrome应用商店添加此项内容 修改crx文件后缀为zip并解压&#xff0c;再拖动到扩展程序

Django(九、choices参数的使用、多对多表的三种创建方式、Ajax技术)

文章目录 一、choices参数choices参数的用法choices 参数用法总结 二、MVC与MTV模式1.MVC2.MTV 三、多对多的三种创建方式1.全自动创建2.纯手动创建半自动创建 四、Django与Ajax1.什么是Ajax常见的场景Ajax案例 一、choices参数 在没有用到choices参数之前&#xff0c;我们在D…

UI原型图

最近没啥项目&#xff0c;闲来无事&#xff0c;研究了一下原型图&#xff0c;万一以后年龄大了&#xff0c;代码敲不动还可以画画原型图&#xff0c;嘿嘿嘿 今天研究了两款画原型图的工具&#xff0c;即时设计-即时设计 - 可实时协作的专业 UI 设计工具 MODAO-墨刀 两款工具…

Flink 运行架构和核心概念

Flink 运行架构和核心概念 几个角色的作用&#xff1a; 客户端&#xff1a;提交作业JobManager进程 任务管理调度 JobMaster线程 一个job对应一个JobMaster 负责处理单个作业ResourceManager 资源的分配和管理&#xff0c;资源就是任务槽分发器 提交应用&#xff0c;为每一个…

基于PHP的纺织用品商城系统

有需要请加文章底部Q哦 可远程调试 基于PHP的纺织用品商城系统 一 介绍 此纺织用品商城系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。用户可注册登录&#xff0c;购物下单&#xff0c;评论等。管理员登录后台可对纺织用品&#xff0c;用户&#xf…

Redis篇---第十篇

系列文章目录 文章目录 系列文章目录前言一、怎么提高缓存命中率&#xff1f;二、Redis 如何解决 key 冲突&#xff1f;三、Redis 报内存不足怎么处理&#xff1f; 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分…

String的intern方法

String类的intern()方法在 Java 中是一个用于获取字符串常量的方法。当调用intern()方法时&#xff0c;它会将当前字符串添加到 Java 虚拟机中的常量池&#xff08;stringtable&#xff09;中&#xff0c;并返回指向该常量的引用。常量池是 Java 系统级别提供的缓存&#xff0c…

循环神经网络RNN完全解析:从基础理论到PyTorch实战

一、循环神经网络全解 1.1 什么是循环神经网络 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类具有内部环状连接的人工神经网络&#xff0c;用于处理序列数据。其最大特点是网络中存在着环&#xff0c;使得信息能在网络中进行循环&#xff0c;实现…

CXL崛起:2024启航,2025年开启新时代

在2019年&#xff0c;Intel主导联合多家阿里巴巴、Facebook(也就是改名后Meta)、谷歌、Dell、华为、思科、微软、HPE最初的八巨头&#xff0c;发布了新的互联协议CXL&#xff0c;全称Comupte Express Link。由于在服务器领域享有绝对领导地位&#xff0c;Intel一经号令&#xf…

Python调用企微机器人: 发送常用格式汇总

企微接口文档 发送应用消息 - 接口文档 - 企业微信开发者中心 发送格式 应用支持推送文本、图片、视频、文件、图文等类型。 ~~~以下列举常用格式 示例~~~ 1.发送文本 代码如下&#xff1a; def sendtxt_robotmsg(self):# 正式keywx_key "xx"wx_webhookurl htt…

【十字链表,邻接多重表(无向图的另一种链式存储结构),图的遍历】

文章目录 十字链表邻接多重表&#xff08;无向图的另一种链式存储结构&#xff09;图的遍历 十字链表 方便找到入度和出度边。 顶点结点&#xff1a; data&#xff1a;顶点存放的数据域。 firstin&#xff1a;第一个入度边。 firstout&#xff1a;第一个出度边。 弧度结点&am…

贪吃蛇代码

一.准备 1.新建项目 2.放进照片 3.创建两个包放置图片类和入口类 二&#xff0c;游戏界面 package com.snake.view;import java.awt.Color; import java.awt.EventQueue; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; i…

【计算机视觉】24-Object Detection

文章目录 24-Object Detection1. Introduction2. Methods2.1 Sliding Window2.2 R-CNN: Region-Based CNN2.3 Fast R-CNN2.4 Faster R-CNN: Learnable Region Proposals2.5 Results of objects detection 3. SummaryReference 24-Object Detection 1. Introduction Task Defin…

Ant Design for Figma设计系统组件库 支持变量 非社区版

Ant Design for Figma 是基于 Ant Design 设计系统的 Figma 组件库&#xff0c;提供丰富的 UI 组件和交互功能&#xff0c;帮助设计师快速构建高质量的 Figma 设计稿。 Ant Design for Figma 继承了 Ant Design 的设计理念和风格&#xff0c;提供丰富的 UI 组件和交互功能&…

十、Linux运行级别

1.基本介绍 运行级别说明&#xff1a; 0&#xff1a;关机 1&#xff1a;单用户【找回丢失密码】 2&#xff1a;多用户状态没有网络服务 【非常少】 3&#xff1a;多用户状态有网络服务 【最多】 4&#xff1a;系统未使用保留给用户 5&#xff1a;图形界面【Linux一启动自动进入…

每天学习一点点之 Spring Web MVC 之抽象 HandlerInterceptor 实现常用功能(限流、权限等)

背景 这里介绍一下本文的背景&#xff08;废话&#xff0c;可跳过&#xff09;。上周有个我们服务的调用方反馈某个接口调用失败率很高&#xff0c;排查了一下&#xff0c;发现是因为这个接口被我之前写的一个限流器给拦截了&#xff0c;随着我们的服务接入了 Sentinel&#x…

Vue3 源码解读系列(十五)——编译

编译 web 模式的编译主要做了 3 件事&#xff1a; 解析 template 生成 ASTAST 转换生成代码 /*** web 编译* param {string} template - 待编译的模板字符串* param {string} options - 配置对象*/ function compile(template, options {}) {return baseCompile(template, …

矩阵理论——Gerschgorin定理,以及用python绘制Gerschgorin圆盘动图

矩阵理论——Gerschgorin定理&#xff0c;以及用python绘制Gerschgorin圆盘动图 在矩阵的特征值估计理论当中&#xff0c;有一节是盖尔圆盘定理&#xff1a; 对于一个n阶复数矩阵A&#xff0c;每个特征值lambda位于至少一个Gerschgorin圆盘中&#xff0c;这些圆盘的中心为矩阵…

华为数通HCIP 821BGP 知识点整理

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

Canal+Kafka实现MySQL与Redis数据同步(二)

CanalKafka实现MySQL与Redis数据同步&#xff08;二&#xff09; 创建MQ消费者进行同步 在application.yml配置文件加上kafka的配置信息&#xff1a; spring:kafka:# Kafka服务地址bootstrap-servers: 127.0.0.1:9092consumer:# 指定一个默认的组名group-id: consumer-group…