当前位置: 首页 > news >正文

vue3 自定义Hooks


文章目录

  • 前言
  • 一、Hooks是什么?
  • 二、图片转换Base64
    • 1.Hooks
    • 2.使用
  • 三、监听元素宽高(自定义指令+Hooks)
    • 1.Hooks
    • 2.使用
  • 总结


前言

本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。


一、Hooks是什么?

Hooks用来处理复用代码逻辑的一些封装,Hooks与Mixins不同点在于Hooks是函数
在vue2中是以Mixins形式将相同的逻辑抽离,各个组件只需要引入mixins,就能使用,mixins存在覆盖问题:
组件data、methods、filters会覆盖mixins中同名data、methods、filters

Mixins生命周期

使用VueUse库可以使用100多项用Hooks完成的功能

二、图片转换Base64

1.Hooks

代码如下:

type Options = {el:string
}
export default function (options:Options):Promise<{baseUrl:string}> {// @ts-ignorereturn new Promise((resolve)=>{onMounted(()=>{let img:HTMLImageElement = document.querySelector(options.el) as HTMLImageElementimg.onload = () =>{resolve({baseUrl:base64(img)})}})const base64 = (el:HTMLImageElement) =>{const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')canvas.width = el.widthcanvas.height = el.heightctx?.drawImage(el,0,0,canvas.width,canvas.height)return canvas.toDataURL('image/jpg')}})
}

2.使用

代码如下:

import useBase64 from '../../../../hooks/index'
useBase64({el: '#img'
}).then(res=>{console.log(res.baseUrl)
})

三、监听元素宽高(自定义指令+Hooks)

1.Hooks

这里要注意的是vue插件需要定义install方法,在app.use()挂载时会调用该方法

/*** interSectionObserver 主要监听元素是否在视口内* MutationObserver 主要监听子集的变化 以及 元素的增删改查* ResizeObserver 主要监听元素宽高的变化*/
// @ts-ignore
import type { APP } from 'vue'/*** 自定义Hooks监听元素宽高变化* @param el* @param callback*/
function useResize(el:HTMLElement,callback:Function) {let resize = new ResizeObserver((entries)=>{callback(entries[0].contentRect)})resize.observe(el)
}/*** 自定义指令* vue插件 必须要有install方法,在app.use()时会调用该方法* @param app*/
const install = (app:APP) => {app.directive('resize', {mounted(el,binding) {useResize(el,binding.value)}})
}
// 将install 挂载到useResize上的install上
useResize.install = install
export default useResize

2.使用

<script setup lang="ts">import {onMounted} from "vue";
import useResize from "../../../hooks/useResize";
// 自定义Hooks
onMounted(()=>{useResize(document.querySelector('.box') as HTMLElement,(e:any)=>{console.log('自定义Hooks',e)})
})
// 自定义指令
const aaa = (e)=>{console.log('自定义指令',e)
}
</script><template>
<div v-resize="aaa" class="box"></div>
</template><style scoped>
.box{overflow: hidden;border: 2px solid black;resize: both;width: 300px;height: 300px;
}
</style>

总结

本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。

相关文章:

vue3 自定义Hooks

文章目录 前言一、Hooks是什么&#xff1f;二、图片转换Base641.Hooks2.使用 三、监听元素宽高&#xff08;自定义指令Hooks&#xff09;1.Hooks2.使用 总结 前言 本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。 一、Hooks是什么&#xff1f; Hooks用来处…...

计算机组成与设计硬件软件接口学习1

计算机的算术运算 子字并行 &#xff08;大致浏览&#xff09;pdf 170页左右 浮点加法不满足结合律&#xff1a; 适用于整型数据类型的并行执行策略并不适用于浮点数据类型 &#xff0c;原因如上↑ 处理器 流水线 流水线是一种能使多条指令重叠执行的实现技术 流水线技术通…...

点云从入门到精通技术详解100篇-基于光谱共焦系统的三维点云数据处理

前言 随着信息技术的飞速发展,我们在生活中受到数字信息带来的方 便日趋增多,数字信息资源对我们的影响越来越深。例如手机上的通 信行程卡,详细记录着我们每个人的所处位置、健康信息等,对于大 量数据的处理成为每个人关注的焦点。近些年来出现的光谱共焦扫描 技术,配…...

2023年五一杯数学建模B题快递需求分析问题求解全过程论文及程序

2023年五一杯数学建模 B题 快递需求分析问题 原题再现&#xff1a; 网络购物作为一种重要的消费方式&#xff0c;带动着快递服务需求飞速增长&#xff0c;为我国经济发展做出了重要贡献。准确地预测快递运输需求数量对于快递公司布局仓库站点、节约存储成本、规划运输线路等具…...

华为云征文|华为云云耀云服务器L实例使用教学(一)

目录 国内免费云服务器&#xff08;体验&#xff09; 认识国内免费云服务器 如何开通国内免费云服务器 云耀云服务器 HECS HECS适用于哪些场景&#xff1f; 网站搭建 电商建设 开发测试环境 云端学习环境 为什么选择华为云耀云服务器 HECS 国内免费云服务器&#xff…...

编写算法对输入的一个整数,判断它能否被 3,5,7 整除

任务描述 本关任务&#xff0c;编写算法对输入的一个整数&#xff0c;判断它能否被 3&#xff0c;5&#xff0c;7 整除&#xff0c;并输出以下信息之一&#xff1a; 能同时被 3&#xff0c;5&#xff0c;7 整除&#xff1b; 能被其中两数&#xff08;要指出哪两个&#xff09…...

Linux CentOS7设置时区

在Linux系统中&#xff0c;默认使用的是UTC时间。 即使在安装系统的时候&#xff0c;选择的时区是亚洲上海&#xff0c;Linux默认的BIOS时间&#xff08;也称&#xff1a;硬件时间&#xff09;也是UTC时间。 在重启之后&#xff0c;系统时间会和硬件时间同步&#xff0c;如果…...

HBase 记录

HBase 管理命令 hbase hbck -details TABLE_NAME hbase hbck -repair TABLE_NAMEHBase概览 Master、RegionServer作用 RegionServer与Region关系 数据定位原理 https://blogs.apache.org/hbase/entry/hbase_who_needs_a_master RegionServer HBase Essentials.pdf (P25)…...

Fiddler抓http数据

目录 参考博客 一、Fiddler配置二、分析Http请求1. Http消息结构简介1.1 Request请求消息1.2 Response响应消息 2. 分析Get接口2.1 请求示例2.2 查看Get请求2.3 查看Get响应 3 分析Post接口 参考博客 一、Fiddler配置 首先需要对Fiddler抓取Https请求进行相关配置&#xff1a…...

【MySQL】redo log 、 undo log、脏页这些概念是什么?

redo log&#xff08;重做日志&#xff09;redo log 是什么redo log 的主要作用Redo 的组成redo如何保证 事务的持久性 undo log&#xff08;撤销日志/回滚日志&#xff09;undo log 是什么redo log 的主要作用undo的存储位置 如何区分 redo log和undo log感谢 &#x1f496;参…...

05ShardingSphere-JDBC水平分片

1、准备服务器 随着业务的扩大&#xff0c;订单表数据量不断增加&#xff0c;数据库面临存储压力&#xff0c;开始考虑对订单表进行水平分片。 将t_order表扩展为server-order0中的t_order0和t_order1、server-order1中的t_order0和t_order1 服务器规划&#xff1a;使用dock…...

Java多线程并发面试题

文章目录 Java并发基础并行和并发有什么区别&#xff1f;说说什么是进程和线程&#xff1f;Java线程创建方式&#xff1f;Runnable和Callable接口的区别&#xff1f;为什么调用start()方法时会执行run()方法&#xff0c;不直接调用run()方法&#xff1f;sleep()和wait()的区别&…...

ELK学习笔记1:简介及安装

ELK学习笔记1&#xff1a;简介及安装 ELK的简介 ELK是三个开源软件的缩写&#xff0c;分别表示&#xff1a;Elasticsearch , Logstash, Kibana , 它们都是开源软件。新增了一个FileBeat&#xff0c;它是一个轻量级的日志收集处理工具(Agent)&#xff0c;Filebeat占用资源少&a…...

uniapp——实现电子签名功能——基础积累

话说&#xff0c;2020年刚来杭州的时候&#xff0c;有用到过uniapp&#xff0c;距今已有三年时间了&#xff0c;果然全忘了&#xff0c;哈哈[笑中带泪] 昨天遇到一个需求&#xff1a;就是要实现pdf文件的预览&#xff0c;着实费了我很多的时间&#xff0c;连晚饭都没有吃好。。…...

【Flink实战系列】Hash collision on user-specified ID “Kafka Source”

Hash collision on user-specified ID “Kafka Source” 在使用 fromSource 构建 Kafka Source 的时候,遇到下面的报错,下面就走进源码,分析一下原因。 Exception in thread "main" java.lang.IllegalArgumentException: Hash collision on user-specified ID &…...

面对 HR 的空窗期提问,你会如何回答?

原文链接 面对 HR 的空窗期提问&#xff0c;你会如何回答&#xff1f; 你是否有过这样的经历&#xff0c;在一段时间内&#xff0c;你离开了工作岗位&#xff0c;或者在寻找新的工作机会&#xff0c;这段时间我们称之为“空窗期”。 对于这段时间&#xff0c;我们该如何看待&…...

性能测试、负载测试、压力测试、稳定性测试简单区分

是一个总称&#xff0c;可细分为性能测试、负载测试、压力测试、稳定性测试。 性能测试 以系统设计初期规划的性能指标为预期目标&#xff0c;对系统不断施加压力&#xff0c;验证系统在资源可接受范围内&#xff0c;是否能达到性能瓶颈。 关键词提取理解 有性能指标&#…...

如何理解恒流源的阻抗为无穷大

最近在看模拟CMOS集成电路设计一书&#xff0c;在阅读过程中有句话让我难以理解&#xff1a;“电流源引入的阻抗为无穷大。“&#xff0c;经查阅资料&#xff0c;明白了为什么这样解释。 可以这样思考&#xff1a;假设我们现在有一个恒流源加上一个电阻的简单电路&#xff0c;那…...

彻底掌握Protobuf编码原理与实战

目录 1.类型2.VARINT 2.1 无符号数2.2 有符号数3.定长 3.1 I64类型3.2 I32类型4.LEN5.代码 学习这些有什么用&#xff1f; - 如果你是后端开发者&#xff0c;掌握这个对工作非常有用 - 如果你是求职者&#xff0c;面试时可以临危不惧 1.类型 最近看到有直接操作wire type相关的…...

移动测试之语音识别功能如何测试?

移动测试之语音识别功能如何测试&#xff1f; 要知道语音识别功能如何测试&#xff0c;我们先了解智能产品语音交互流程&#xff1a; 所以&#xff0c;要进行测试的话&#xff0c;我们需要从以下几个维度来准备测试点&#xff1a; 基础功能测试&#xff1a; 1、声纹的录入&…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...