Vue学习记录之十四 自定义hooks综合实例

自定义 Hook 就是自定义函数,但这些函数通常依赖 Vue 的组合式 API,并封装组件逻辑,使其更易于维护和复用。自定义 Hook 可以像普通函数一样调用,但在设计时要考虑组件的生命周期和响应式数据。

一、实例1 图片转化为64编码

<template><div><img id="img" width="300" height="300" src="./assets/images/1.jpg" /></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import useBase64 from './hooks'
useBase64({el:'#img'}).then(res=>{console.log(res.baseUrl)
})
</script>

./hooks/index.ts

import { onMounted } from "vue"
type Options = {el:string
}
//为了获取到返回值,使用Promise,那么返回值的类型就是Promise, 返回值是字符串类型的baseUrl
export default function(options:Options

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

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

相关文章

安装好的 Nginx 增加 nginx-module-vts 模块

目录 1. nginx-module-vts 准备 2.查看已安装的的 nginx 编译参数 3. 重新编译 nginx 添加 nginx-module-vts 模块 4. 验证 1. nginx-module-vts 准备 # 解压 unzip nginx-module-vts-master.zip # 将解压包移动到/usr/local/目录 mv nginx-module-vts-master /usr/local/ …

jmeter响应断言放进csv文件遇到的问题

用Jmeter的json 断言去测试http请求响应结果&#xff0c;发现遇到中文时出现乱码&#xff0c;导致无法正常进行响应断言&#xff0c;很影响工作。于是&#xff0c;察看了其他测试人员的解决方案&#xff0c;发现是jmeter本身对编码格式的设置导致了这一问题。解决方案是在jmete…

轻松应对PDF编辑难题:四款免费pdf编辑器实测体验

作为一名办公室文员&#xff0c;每天处理各种文件是家常便饭。而PDF文档因其格式稳定、不易篡改的特性&#xff0c;在工作中扮演着重要角色。但编辑PDF文件却不像编辑Word文档那样简单&#xff0c;这就需要一款得心应手的PDF编辑器。今天&#xff0c;我就来分享一下我使用过的几…

如何利用解析器绕过访问控制

0x01 前言 每年blackhat总是会有一些新奇的攻击思路值得大家学习&#xff0c;在2024年blackhat的议题中发现一篇很有意思的文章&#xff0c;作者提出了一套基于邮箱的欺骗攻击思路&#xff0c;利用RFC标准中对SMTP协议中邮箱地址的特性&#xff0c;提供一系列绕过技巧&#xf…

揭秘Map与Set的键值奥秘与集合魅力,解锁高效数据魔法

文章目录 前言➰一、关联式容器1.1 关联式容器的概述1.2 关联式容器的工作原理1.3 关联式容器的核心特性 ➰二、键值对2.1 键值对的基本概念2.2 键值对在C中的实现 ➰三、树形结构的关联式容器3.1 树形结构的特点3.2 使用场景 ➰四、set的使用与定义4.1 set的基本特性4.2 set的…

Flutter UI组件库(JUI)

Flutter UI组件库 (JUI) 介绍 您是否正在寻找一种方法来简化Flutter开发过程&#xff0c;并创建美观、一致的用户界面&#xff1f;您的搜索到此为止&#xff01;我们的Flutter UI组件库&#xff08;JUI&#xff09;提供了广泛的预构建、可自定义组件&#xff0c;帮助您快速构建…

RHCE--ntp客户端,时间服务器服务端

NTP 是网络时间协议&#xff08; Network Time Protocol &#xff09;的简称&#xff0c;通过 udp 123 端口进行网络时钟同步。 Chrony 是一个开源自由的网络时间协议 NTP 的客户端和服务器软件。它能让计算机保持系统时钟与时钟服务器&#xff08; NTP &#xff09;同步&#…

计算机网络:数据链路层 —— 以太网(Ethernet)

文章目录 局域网局域网的主要特征 以太网以太网的发展100BASE-T 以太网物理层标准 吉比特以太网载波延伸物理层标准 10吉比特以太网汇聚层交换机物理层标准 40/100吉比特以太网传输媒体 局域网 局域网&#xff08;Local Area Network, LAN&#xff09;是一种计算机网络&#x…

基于SSM果蔬经营系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商品信息管理&#xff0c;类型管理&#xff0c;系统管理&#xff0c;订单管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品信息&#xff0c;广告…

爬虫+数据保存

爬虫以及数据保存 这篇文章, 分享如何将爬虫爬到的数据, 保存到excel表格当中。 文章目录 1.安装保存数据的第三方库openpyxl并使用 2.爬虫加单表数据保存 3.爬虫加多表数据保存 4.实战 一、安装保存数据的第三方库openpyxl并使用 我们需要安装openpyxl的第三方库 安装…

Qt第十三天:网络编程:TCP和UDP的使用

我发现了有些人喜欢静静看博客不聊天呐&#xff0c; 但是ta会点赞。 这样的人呢帅气低调有内涵&#xff0c; 美丽大方很优雅。 说的就是你&#xff0c; 不用再怀疑哦 ❤️TCP&#xff1a; 一、创建项目&#xff0c;命名为Server&#xff0c;继承QWidget 二、添加Qt设计师…

CentOS7安装RabbitMQ-3.13.7、修改端口号

本文安装版本&#xff1a; Erlang&#xff1a;26.0 官网下载地址 Erlang RabbitMQ&#xff1a;3.13.7 官网下载地址 RabbitMQ RabbitMQ和Erlang对应关系查看&#xff1a;https://www.rabbitmq.com/which-erlang.html 注&#xff1a;安装erlang之前先安装下依赖文件&#xff0…

云黑系统全解无后门 +搭建教程

这套系统呢是玖逸之前南逸写的一套云黑系统&#xff0c;功能带有卡密生成和添加黑名单等&#xff0c;源码放在我的网盘里已经两年之久&#xff0c;由于玖逸现在已经跑路了所以现在发出来分享给大家&#xff0c;需要的可以自己拿去而开&#xff0c;反正功能也不是很多具体的自己…

Teledyne LeCroy:800G高速以太网一站式自动化测试解决方案(网络打流测试+物理层加压干扰+协议分析)

LinkExpert一站式测试解决方案 LinkExpert 是一款软件应用程序&#xff0c;可对Teledyne LeCroy的协议分析仪和训练器进行自动化硬件控制和管理。除了作为合规性、一致性和验证测试的便捷接口外&#xff0c;它还能轻松地将这些测试添加到自动回归测试流程中。 现在&#xff0c;…

WPF基础权限系统

一.开发环境 VisualStudio 2022NET SDK 8.0Prism 版本 8.1.97Sqlite 二. 功能介绍 WPF 基础权限系统&#xff0c;是一个支持前后端分离设计的 客户端(C/S)项目&#xff0c;该示例项目前端xaml使用UI库 &#xff0c;Material Design Themes UI 来构建用户界面&#xff0c;确保…

C# -- Abstract、Virtual、interface

一、Virtual方法&#xff08;虚方法&#xff09; 1&#xff09;virtual 关键字用于在基类&#xff08;父类&#xff09;中修饰方法 2&#xff09;基类中定义了virtual方法&#xff0c;派生类中使用override重写该方法 二、Abstract方法&#xff08;抽象方法&#xff09; 1&…

【ssh】Mac 使用 ssh 连接阿里云报错:Connection reset by 8.155.1.xxx port 22

Mac 使用 ssh 连接阿里云报错&#xff1a;Connection reset by 8.155.1.xxx port 22 问题描述解决办法 问题描述 Connection reset by 8.155.1.xxx port 22解决办法 关掉代理 VPN

CTFHUB技能树之XSS——存储型

开启靶场&#xff0c;打开链接&#xff1a; 发现地址栏中的URL没有GET传参&#xff0c;而且这次是“Hello&#xff0c;no name” 还是跟反射型一样的流程&#xff1a; 先注入一下看看&#xff1a; <script>alert(1)</script> 但界面的结果还是“Hello&#xff0c…

【网络协议】之 HTTP 协议详解

HTTP 协议是 Web 的基石&#xff0c;它定义了客户端和服务器之间的通信规则。本文将深入地探讨 HTTP 的核心概念&#xff0c;包括工作原理、请求方法、状态码以及不同 HTTP 版本的演进。 一、HTTP 的工作原理 HTTP 协议基于客户端-服务器模型&#xff0c;遵循请求-响应的循环&…

FineReport 计算同比增长

1、数据库查询 SELECTt1.年,t1.月,t1.总金额 AS 同期金额,t1.仓库名称,t2.总金额 AS 上期金额 FROMtest t1LEFT JOIN test t2 ON ( t1.年 t2.年 1 ) AND t1.月 t2.月 AND t1.仓库名称 t2.仓库名称2、配置字段 月份字段加后缀 月 数据列加后缀 计算同比增长率 if(LEN(B3)0 …