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

告别传统的防抖机制，提交按钮的新时代来临

news 来源：原创 2025/6/19 20:42:22

背景

目标

核心代码

样式定义：让图标居中、响应父级颜色

SVG 图标：轻量、无依赖的 loading 图标

指令注册：全局注册 v-bLoading

DOM 操作：添加与清除 loading 图标

1. 添加 loading 图标

2. 清除 loading 图标

动画控制：实现 loading 图标旋转

完整代码

main.js里全局引入

使用案例

结语

背景

在现代 Web 开发中，用户体验（UX）是至关重要的。当用户点击一个提交按钮或执行某个异步操作时，如果没有明确的反馈机制，很容易造成重复点击、数据冲突等问题。

为了解决这个问题，我们常常会使用 loading 加载状态 来提示用户“正在处理”，并同时禁用按钮防止多次触发。Vue 提供了强大的自定义指令功能，我们可以借助它来封装一个通用的 v-bLoading 指令，实现优雅的加载交互体验。

本文将从背景出发，逐步分析如何通过 Vue 3 的自定义指令机制，结合 DOM 操作和动画控制，实现一个可复用的按钮 loading 功能。

目标

当按钮被点击时：
- 显示 loading 图标；
- 禁用按钮；
- 执行传入的异步函数；
异步操作完成后：
- 移除 loading 图标；
- 启用按钮；
- 如果原来有图标，恢复原图标。

核心代码

封装js文件，这里我们导入了 Vue 3 中的 App 和 DirectiveBinding 类型，用于类型检查和保证代码的健壮性。以下是代码模块讲解表格

模块	功能
样式部分	定义 loading 图标的样式
SVG 图标	使用内联 SVG 实现 loading 动画图标
核心逻辑	注册 `v-bLoading` 指令，绑定点击事件
DOM 操作	添加/移除 loading 图标，保存/恢复原有图标
动画控制	使用 `requestAnimationFrame` 实现旋转动画

样式定义：让图标居中、响应父级颜色

const className = `.el-icon {--color: inherit;-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: 1em;width: 1em;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;line-height: 1em;position: relative;fill: currentColor;color: var(--color);font-size: inherit;
}`

SVG 图标：轻量、无依赖的 loading 图标

const i = `<i class="${className}" id="loading"><svg t="1745215287730" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="2663" width="200" height="200"><!-- path 数据省略 --></svg></i>
`

指令注册：全局注册 `v-bLoading`

export function bLoading(app: App<Element>) {app.directive('bLoading', {mounted(el: HTMLElement, binding: DirectiveBinding) {if (typeof binding.value !== 'function') {throw new Error('Directive value must be a function')}el.addEventListener('click', () => {addNode(el)setTimeout(() => {binding.value(() => {cleanNode(el)})}, 0)})}})
}

mounted 生命周期钩子用于绑定点击事件。
binding.value 必须是一个函数，该函数接收一个回调参数 done。
在点击按钮后，先添加 loading 图标，然后执行传入的异步函数。
函数执行完毕后调用 done 清除 loading。

DOM 操作：添加与清除 loading 图标

1. 添加 loading 图标

function addNode(el: HTMLElement): void {if (el.firstElementChild && el.firstElementChild.tagName === 'I') {tag = el.firstElementChildel.removeChild(el.firstElementChild)}el.insertAdjacentHTML('afterbegin', i)el.setAttribute('disabled', 'true')rotate('loading')
}

判断是否已有图标，有的话先保存起来；
插入新的 loading 图标；
设置按钮为禁用状态；
触发动画函数 rotate。

2. 清除 loading 图标

function cleanNode(el: HTMLElement): void {el.removeAttribute('disabled')if (el.firstElementChild?.id === 'loading') {el.removeChild(el.firstElementChild)}if (tag) {el.prepend(tag)tag = null}
}

移除禁用；
删除当前的 loading 图标；
如果之前有图标，则恢复回去。

动画控制：实现 loading 图标旋转

function rotate(id: string): void {const element = document.getElementById(id)if (!element) returnlet angle = 0const speed = 2 // 每帧旋转角度function animate() {angle = (angle + speed) % 360element.style.transform = `rotate(${angle}deg)`requestAnimationFrame(animate)}animate()
}

使用 requestAnimationFrame 实现平滑的旋转动画，避免卡顿或性能问题。

完整代码

import type { App, DirectiveBinding } from 'vue'// 全局 loading 图标 SVG 字符串
const className = `.el-icon {--color: inherit;-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: 1em;width: 1em;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;line-height: 1em;position: relative;fill: currentColor;color: var(--color);font-size: inherit;
}`const i = `<i class="${className}" id="loading"><svg t="1745215287730" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="2663" width="200" height="200"><path d="M834.7648 736.3584a5.632 5.632 0 1 0 11.264 0 5.632 5.632 0 0 0-11.264 0z m-124.16 128.1024a11.1616 11.1616 0 1 0 22.3744 0 11.1616 11.1616 0 0 0-22.3744 0z m-167.3216 65.8944a16.7936 16.7936 0 1 0 33.6384 0 16.7936 16.7936 0 0 0-33.6384 0zM363.1616 921.6a22.3744 22.3744 0 1 0 44.7488 0 22.3744 22.3744 0 0 0-44.7488 0z m-159.744-82.0224a28.0064 28.0064 0 1 0 55.9616 0 28.0064 28.0064 0 0 0-56.0128 0zM92.672 700.16a33.6384 33.6384 0 1 0 67.2256 0 33.6384 33.6384 0 0 0-67.2256 0zM51.2 528.9984a39.168 39.168 0 1 0 78.336 0 39.168 39.168 0 0 0-78.336 0z m34.1504-170.0864a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 0 0-89.6 0zM187.904 221.7984a50.432 50.432 0 1 0 100.864 0 50.432 50.432 0 0 0-100.864 0zM338.432 143.36a55.9616 55.9616 0 1 0 111.9232 0 55.9616 55.9616 0 0 0-111.9744 0z m169.0112-4.9152a61.5936 61.5936 0 1 0 123.2384 0 61.5936 61.5936 0 0 0-123.2384 0z m154.7776 69.632a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 0 0-134.3488 0z m110.0288 130.816a72.8064 72.8064 0 1 0 145.5616 0 72.8064 72.8064 0 0 0-145.5616 0z m43.7248 169.472a78.3872 78.3872 0 1 0 156.8256 0 78.3872 78.3872 0 0 0-156.8256 0z"fill="" p-id="2664"></path></svg></i>
`let tag: Element | null = null/*** 注册一个全局自定义指令 v-bLoading* @param app Vue 应用实例*/
export function bLoading(app: App<Element>) {app.directive('bLoading', {mounted(el: HTMLElement, binding: DirectiveBinding) {if (typeof binding.value !== 'function') {throw new Error('Directive value must be a function')}el.addEventListener('click', () => {addNode(el)setTimeout(() => {binding.value(() => {cleanNode(el)})}, 0)})}})
}/*** 添加 loading 图标到按钮中* @param el 按钮元素*/
function addNode(el: HTMLElement): void {if (el.firstElementChild && el.firstElementChild.tagName === 'I') {// 如果已经有图标，先保存旧图标tag = el.firstElementChildel.removeChild(el.firstElementChild)}el.insertAdjacentHTML('afterbegin', i)el.setAttribute('disabled', 'true')rotate('loading')
}/*** 移除 loading 图标，并恢复原有图标（如果存在）* @param el 按钮元素*/
function cleanNode(el: HTMLElement): void {el.removeAttribute('disabled')if (el.firstElementChild?.id === 'loading') {el.removeChild(el.firstElementChild)}if (tag) {el.prepend(tag)tag = null}
}/*** 实现 loading 图标的旋转动画* @param id loading 图标元素的 ID*/
function rotate(id: string): void {const element = document.getElementById(id)if (!element) returnlet angle = 0const speed = 2 // 每帧旋转角度function animate() {angle = (angle + speed) % 360element.style.transform = `rotate(${angle}deg)`requestAnimationFrame(animate)}animate()
}

main.js里全局引入

import { createApp } from 'vue'import App from './App.vue'import { bLoading } from './utils/loading'
const app = createApp(App)
bLoading(app)

使用案例

<button type="primary" v-bLoading="(next) => handleSubmit(next)">疯狂点击</button>function handleSubmit(next){ setTimeout(()=>{     next() 
},3000)}

结语

通过这篇文章，我们学习了如何使用 Vue 3 的自定义指令机制，结合 DOM 操作和动画控制，实现了一个实用的按钮 loading 指令 v-bLoading。该指令具有以下优点：

🧩 模块化结构清晰；
🎨 样式可定制；
⚙️ 支持异步操作；
🔄 可恢复原始图标；
🐞 易于调试和扩展。

告别传统的防抖机制，提交按钮的新时代来临

目录背景目标核心代码样式定义：让图标居中、响应父级颜色 SVG 图标：轻量、无依赖的 loading 图标指令注册：全局注册 v-bLoading DOM 操作：添加与清除 loading 图标 1. 添加 loading 图标 2. 清除 loading 图标动画…...

编程日记 2025/6/19 20:42:22

【Linux】Linux安装并配置MongoDB

目录 1.添加仓库 2.安装 MongoDB 包 3.启动 MongoDB 服务 4. 验证安装 5.配置 5.1.进入无认证模式 5.2.1创建用户 5.2.2.开启认证 5.2.3重启 5.2.4.登录 6.端口变更 7.卸载 7.1.停止 MongoDB 服务 7.2.禁用 MongoDB 开机自启动 7.3.卸载 MongoDB 包 7.4.删除数…...

编程日记 2025/5/17 7:25:17

PT2031K单触控单输出触摸IC

1.产品概述 ● PT2031K是一款电容式触摸控制ASIC，支持单通道触摸输入和单路同步开关输出。适用于雾化器、车载用品、电子玩具、消费类电子产品等领域，具有低功耗、高抗干扰、宽工作电压范围的突出优势。 2.主要特性 ● 工作电压范围：2.4~5.5…...

编程日记 2025/6/19 20:22:19

MySQL 与 FastAPI 交互教程

目录 1. 使用 Docker 启动 MySQL2. 创建 FastAPI 应用安装必要的依赖创建项目结构创建数据库连接模块创建数据模型创建 Pydantic 模型（用于请求和响应）创建主应用 3. 运行和测试应用启动应用访问 API 文档 4. 测试 API 端点创建用户获取所有用户获取特定…...

编程日记 2025/6/19 19:03:53

分布式 ID 生成的五种方法：优缺点与适用场景

0.简介在分布式系统中，生成全局唯一的id是一个常见的需求。由于分布式系统的特性（多节点，网络分区，时钟不同步等），传统的单机ID生成方式不再适用，所以一些分布式生成方式应运而生，…...

编程日记 2025/6/19 20:40:11

ES（Elasticsearch）的应用与代码示例

Elasticsearch应用与代码示例技术文章大纲一、引言 Elasticsearch在现代化应用中的核心作用典型应用场景分析（日志分析/全文检索/数据聚合） 二、环境准备(前提条件) Elasticsearch 8.x集群部署要点IK中文分词插件配置指南Ingest Attachment插件安装…...

编程日记 2025/5/17 7:24:13

MinIO 开源的分布式文件服务器

如下是java代码调用MinIO的SDK实现文件的上传,并获取url <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.9.3</version> </dependenc…...

编程日记 2025/5/17 7:24:12

蓝牙AVRCP协议概述

AVRCP(Audio/Video Remote Control Profile)定义了蓝牙设备和 audio/video 控制功能通信的特点和过程，另用于远程控制音视频设备，底层传输基于 AVCTP 传输协议。该 Profile 定义了AV/C 数字命令控制集。命令和信息通过 AVCTP(Audio/Video Control Trans…...

编程日记 2025/6/19 20:27:21

【全网首发】解决coze工作流批量上传excel数据文档数据重复的问题

注意：目前方法将基于前一章批量数据库导入的修改！！！！请先阅读上篇文章的操作。抄袭注明来源背景上一节说的方法可以批量导入文件到数据库，但是无法解决已经上传的条目更新问题。简单来说，不…...

编程日记 2025/5/27 5:59:29

Hue面试内容整理-Hue 架构与前后端通信

Cloudera Hue 是一个基于 Web 的 SQL 助手，旨在为数据分析师和工程师提供统一的界面，以便与 Hadoop 生态系统中的各个组件（如 Hive、Impala、HDFS 等）进行交互。其架构设计强调前后端的分离与高效通信，确保系统的可扩展性和可维护性。以下是 Hue 架构及其前后端通信机制的…...

编程日记 2025/5/19 7:40:42

【八股战神篇】Java高频基础面试题

1 面向对象编程有哪些特性？ 面向对象编程（Object-Oriented Programming，简称 OOP）是一种以对象为核心的编程范式，它通过模拟现实世界中的事物及其关系来组织代码。OOP 具有三大核心特性：封装、继承、多态。…...

编程日记 2025/6/19 20:14:55

matlab建立整车模型，求汽车的平顺性

在MATLAB中建立整车模型评估汽车平顺性，通常采用多自由度振动模型。以下是基于四分之一车模型的详细步骤和代码示例，可扩展至整车模型。 1. 四分之一车模型（简化版） 模型描述自由度：2个（车身垂直位移 z2…...

编程日记 2025/5/26 10:16:04

在Linux服务器上部署Jupyter Notebook并实现ssh无密码远程访问

Jupyter notebook版本7.4.2（这个版本AI提示我Jupyter7（底层是 jupyter_server 2.x） 服务器开启服务安装Jupyter notebook 7.4.2成功后，终端输入 jupyter notebook --generate-config 这将在 ~/.jupyter/ 目录下生成 jupyter_…...

编程日记 2025/5/29 17:37:07

C#数组与集合

🧠 一、数组（Array） 1. 定义和初始化数组 // 定义并初始化数组 int[] numbers new int[5]; // 默认值为 0// 声明并赋值 string[] names { "Tom", "Jerry", "Bob" };// 使用 new 初始化 double[] scores …...

编程日记 2025/6/19 20:29:23

服务器内部可以访问外部网络，docker内部无法访问外部网络，只能docker内部访问

要通过 iptables 将容器中的特定端口请求转发到特定服务器，你需要设置 DNAT（目标地址转换）规则。以下是详细步骤： 假设场景容器端口: 8080（容器内服务监听的端口）目标服务器: 192.168.1.100（请…...

编程日记 2025/5/28 15:52:19

mathematics-2024《Graph Convolutional Network for Image Restoration: A Survey》

推荐深蓝学院的《深度神经网络加速：cuDNN 与 TensorRT》，课程面向就业，细致讲解CUDA运算的理论支撑与实践，学完可以系统化掌握CUDA基础编程知识以及TensorRT实战，并且能够利用GPU开发高性能、高并发的软件系统&#xf…...

编程日记 2025/5/27 8:25:09

ssti刷刷刷

[NewStarCTF 公开赛赛道]BabySSTI_One 测试发现过滤关键字，但是特殊符号中括号、双引号、点都能用可以考虑拼接或者编码，这里使用拼接 ?name{{()["__cla"~"ss__"]}}?name{{()["__cla"~"ss__"]["__ba&…...

编程日记 2025/6/19 20:02:58

目录概述 1. 软硬件环境 1.1 软件开发环境 1.2 硬件环境 2 Flash操作库函数 2.1 nRF52832的Flash 2.2 Nordic 特有的 Flash 操作 2.2.1 nrfx_nvmc_bytes_write 函数 2.2.2 nrfx_nvmc_page_erase函数 2.2.3 nrfx_nvmc_write_done_check 函数 3 操作Flash的接口函数…...

编程日记 2025/5/27 8:18:54

傅里叶变换实战：图像去噪与边缘提取

傅里叶变换在图像处理中的应用与实践详解（超详细教程实战代码） 🚀 本文从零开始详解傅里叶变换在图像处理中的应用，手把手教你实现图像去噪与边缘提取！全文配套Python代码，新手也能轻松上手！ 一…...

编程日记 2025/5/29 9:38:21

go-中间件的使用

中间件介绍 Gin框架允许开发者在处理请求的过程中加入用户自己的钩子(Hook)函数这个钩子函数就是中间件，中间件适合处理一些公共的业务逻辑比如登录认证，权限校验，数据分页，记录日志，耗时统计 1.定义全局中间件 pac…...

编程日记 2025/5/29 21:25:17

昇腾NPU环境搭建

如果进入服务器输入npu-smi info可以看到npu情况，请直接跳转第三步 STEP1: 服务器安装依赖 sudo yum install -y gcc gcc-c make cmake unzip zlib-devel libffi-devel openssl-devel pciutils net-tools sqlite-devel lapack-devel gcc-gfortran python3-develyu…...

编程日记 2025/6/19 20:13:38

【HTML5学习笔记2】html标签（下）

1表格标签 1.1表格作用显示数据 1.2基本语法 <table><tr> 一行<td>单元格1</td></tr> </table> 1.3表头单元格标签表头单元格会加粗并且居中 <table><tr> 一行<th>单元格1</th></tr> </table&g…...

编程日记 2025/5/31 5:43:32

开源轻量级地图解决方案leaflet

Leaflet 地图：开源轻量级地图解决方案 Leaflet 是一个开源的 JavaScript 库，用于在网页中嵌入交互式地图。它以轻量级、灵活性和易用性著称，适用于需要快速集成地图功能的项目。以下是关于 Leaflet 的详细介绍和使用指南。 1. Leaflet 的核心…...

编程日记 2025/5/26 20:13:53

LLM学习笔记（六）线性代数

公式速查表 1. 向量与矩阵：表示、转换与知识存储的基础向量表示 (Vectors): 语义的载体在LLM中，向量 x ∈ R d \mathbf{x}\in\mathbb{R}^d x∈Rd 是信息的基本单元，承载着丰富的语义信息： 词嵌入向量 (Word Embeddings)&am…...

编程日记 2025/6/19 20:30:28

Vue 3.0双向数据绑定实现原理

Vue3 的数据双向绑定是通过响应式系统来实现的。相比于 Vue2，Vue3 在响应式系统上做了很多改进，主要使用了 Proxy 对象来替代原来的 Object.defineProperty。本文将介绍 Vue3 数据双向绑定的主要特点和实现方式。 1. 响应式系统 1.1. Proxy对象 Vue3 …...

编程日记 2025/5/30 12:04:25

Quasar组件 Carousel走马灯

通过对比两个q-carousel组件来，了解该组件的属性官方文档请参阅：Carousel 预览源代码 <template><div class"q-pa-md"><div class"q-gutter-md"><q-carouselv-model"slide"transition-prev&quo…...

编程日记 2025/5/29 18:36:59

Vue 2.0学习

个人简介 👨‍💻‍个人主页： 魔术师 📖学习方向： 主攻前端方向，正逐渐往全栈发展 🚴个人状态： 研发工程师，现效力于政务服务网事业 🇨🇳人生格言&…...

编程日记 2025/5/24 10:58:04

LangFlow技术深度解析：可视化编排LangChain应用的新范式 -（3）组件系统

Component System | langflow-ai/langflow | DeepWiki 组件系统相关源文件组件系统是核心基础设施，使 Langflow 能够在工作流中创建、配置和连接模块化构建块。该系统通过为组件提供一致的接口来定义其输入、输出、执行行为以及与其他组件的连接，从…...

编程日记 2025/6/19 19:42:35

【Win32 API】 lstrcmpA()

作用比较两个字符字符串（比较区分大小写）。 lstrcmp 函数通过从第一个字符开始检查，若相等，则检查下一个，直到找到不相等或到达字符串的末尾。函数 int lstrcmpA(LPCSTR lpString1, LPCSTR lpString2); 参数 lpStr…...

编程日记 2025/6/19 20:01:51

LabVIEW光谱检测系统

腔衰荡光谱技术（CRDS）凭借高精度和高灵敏度特性，成为微量气体浓度检测的常用方法，而准确获取衰荡时间是该技术应用的关键。基于LabVIEW平台设计腔衰荡信号在线处理系统，实现对衰荡信号的实时采集、平均、拟合、显示和保…...

编程日记 2025/5/25 0:48:18

深入解读WPDRRC信息安全模型：构建中国特色的信息安全防护体系

目录前言1 WPDRRC模型概述2 模型结构详解2.1 预警（Warning）2.2 保护（Protect）2.3 检测（Detect）2.4 响应（React）2.5 恢复（Restore）2.6 反击（Count…...

编程日记 2025/5/31 22:04:52

uniapp-商城-59-后台新增商品（属性的选中，进行过滤展示，filter，some，every和map）

前面讲了属性的添加，添加完成后，数据库中已经存在数据了，这时再继续商品的添加时，就可以进行属性的选择了。在商品添加过程中，属性选择是一个关键步骤。首先，界面需要展示嵌套的属性数据，用户通…...

编程日记 2025/5/19 7:38:35

RDIFramework.NET Web敏捷开发框架 V6.2发布(.NET6+、Framework双引擎)

1、框架介绍 .NET6、Framework双引擎、全网唯一 RDIFramework.NET敏捷开发框架，是我司重磅推出的支持.NET6和.NET Framework双引擎的快速信息化系统开发、整合框架，为企业快速构建企业级的应用提供了强大支持。依托框架强大的基座，开发人员只…...

编程日记 2025/6/19 20:28:18

JMeter 教程：编写 GET 请求脚本访问百度首页

目录练习要求： 练习步骤： 效果图： 练习要求： 练习步骤： 效果图：...

编程日记 2025/6/3 23:30:03

JSP 实现二级联动下拉菜单：一次加载，前端动态更新

在Web开发中，二级联动下拉菜单（或多级联动）是一种非常常见的用户交互形式，例如选择省份后动态加载对应的城市列表。本文将详细介绍一种在JSP中实现二级联动的方法：后端一次性将所有联动数据加载到前端，然后通过JavaScript在客户端动态更新二级下拉菜单。这种方法对于数据…...

编程日记 2025/5/21 10:50:39

Room数据库

Room数据库 Room是Android Jetpack组件中的一款SQLite数据库抽象层框架，旨在简化本地数据库操作，提供编译时SQL校验、类型与安全、与LiveData/Flow无缝集成等特性。 1. 什么是Room 定义： Room 是 Android Jetpack 提供的一个 ORM&#xff…...

编程日记 2025/5/26 8:06:37

文件上传Ⅲ

#文件-解析方案-执行权限&解码还原 1、执行权限文件上传后存储目录不给执行权限（即它并不限制你上传文件的类型，但不会让相应存有后门代码的PHP文件执行，但是PNG图片是可以访问的） 2、解码还原数据做存储，解…...

编程日记 2025/5/28 7:31:46

前端取经路——量子UI：响应式交互新范式

嘿，老铁们好啊！我是老十三，一枚普通的前端切图仔（不，开玩笑的，我是正经开发）。最近前端技术简直跟坐火箭一样，飞速发展！今天我就跟大家唠唠从状态管理到实时渲染&#xf…...

编程日记 2025/5/20 10:54:25

15 C 语言字符类型详解：转义字符、格式化输出、字符类型本质、ASCII 码编程实战、最值宏汇总

1 字符类型概述在 C 语言中，字符类型 char 用于表示单个字符，例如一个数字、一个字母或一个符号。 char 类型的字面量是用单引号括起来的单个字符，例如 A、5 或 #。当需要表示多个字符组成的序列时，就涉及到了字符串。在 C 语言…...

编程日记 2025/5/22 19:38:01

AlphaEvolve：LLM驱动的算法进化革命与科学发现新范式

AlphaEvolve：LLM驱动的算法进化革命与科学发现新范式本文聚焦Google DeepMind最新发布的AlphaEvolve，探讨其如何通过LLM与进化算法的结合，在数学难题突破、计算基础设施优化等领域实现革命性进展。从48次乘法优化44矩阵相乘到数据中心资源利…...

编程日记 2025/5/30 17:24:13

比较文本搜索策略 pgsearch、tsvector 和外部引擎

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！ 在应用程序中实现搜索功能时，您需要选择合适的文本搜索方法。本指南比较了 PostgreSQL 的内置搜索引擎tsvector、pg_search扩展…...

编程日记 2025/5/31 15:07:53

58. 区间和

题目链接： 58. 区间和题目描述： 给定一个整数数组 Array，请计算该数组在每个指定区间内元素的总和。输入描述第一行输入为整数数组 Array 的长度 n，接下来 n 行，每行一个整数，表示数组的元素。随后…...

编程日记 2025/6/1 8:47:26

MySQL中表的增删改查（CRUD）

一.在表中增加数据（Create） INSERT [INTO] TB_NAME [(COLUMN1,COLUMN2,...)] VALUES (value_list1),(value_list2),...;into可以省略可仅选择部分列选择插入，column即选择的列， 如图例可以选择仅在valuelist中插入age和id如果不指…...

编程日记 2025/5/24 0:46:55

SQL练习（6/81）

目录 1.寻找连续值方法一：使用自连接（Self-Join） 方法二：使用窗口函数（Window Functions） 2.寻找有重复的值 GROUP BY子句 HAVING子句常用聚合函数： 3.找不存在某属性的值 not in no…...

编程日记 2025/6/19 19:12:44

Android 中打开文件选择器（ACTION_OPEN_DOCUMENT ）

在 Android 中，打开文件选择器（File Picker）通常是指启动一个系统提供的界面，让用户可以选择存储在设备上的文件。可以通过发送一个带有 Intent.ACTION_OPEN_DOCUMENT 或 Intent.ACTION_GET_CONTENT 的 Intent 来实现。 1、启动文…...

编程日记 2025/5/28 14:12:59

AWS中国区CloudFront证书管理和应用指南

在AWS中国区使用CloudFront时，SSL/TLS证书的管理和应用是一个重要的环节。本文将详细介绍如何在AWS中国区上传、管理和应用SSL证书到CloudFront分配。 1. 准备证书文件首先，我们需要准备好SSL证书相关的文件。通常，这包括：私钥文件（.key）公钥证书文件（.crt）证书链文…...

编程日记 2025/5/29 18:10:21

Python之三大基本库——Matplotlib

好久没来总结了，今天刚好有时间，我们来继续总结一下python中的matplotlib 一、什么是Matplotlib ‌Matplotlib‌是一个Python的2D绘图库，主要用于将数据绘制成各种图表，如折线图、柱状图、散点图、直方图、饼图等。它以各种硬拷贝…...

编程日记 2025/5/22 21:30:03

随笔：hhhhh

第一题 ∫ − ∞ ∞ x e x − e x d x ∫ 0 ∞ ln ⁡ t ⋅ e ln ⁡ t − t ⋅ 1 t d t ∫ 0 ∞ ln ⁡ t ⋅ e − t ⋅ 1 t ⋅ t d t ∫ 0 ∞ ln ⁡ t ⋅ e − t d t ψ ( 1 ) − γ \begin{align*} \int_{-\infty}^{\infty}xe^{x-e^x}\text{d}x&\int_{0}^{\infty}…...

编程日记 2025/5/25 17:58:00

计算机网络-----6分层结构

目录 “分层” 的设计思想： 计算机网络要完成的功能： 计算机网络的分层结构： 网络体系结构的概念： 各层之间的关系： 数据的传输过程水平视角： 垂直视角： 相关概念协议三要素&#x…...

编程日记 2025/5/28 11:08:52

初识SOC：RK3588

目录一、高性能计算与边缘计算二、多媒体处理与显示三、图形与游戏开发四、物联网与嵌入式系统五、操作系统兼容性 RK3588作为瑞芯微推出的高性能处理器，凭借其多核架构、高算力NPU和多媒体处理能力，可广泛应用于以下领域： 一、高…...

编程日记 2025/5/27 2:20:24

背景

目标

核心代码

样式定义：让图标居中、响应父级颜色

SVG 图标：轻量、无依赖的 loading 图标

指令注册：全局注册 v-bLoading

DOM 操作：添加与清除 loading 图标

1. 添加 loading 图标

2. 清除 loading 图标

动画控制：实现 loading 图标旋转

完整代码

main.js里全局引入

使用案例

结语

相关文章：

指令注册：全局注册 `v-bLoading`