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

使用原生button封装一个通用按钮组件

news 来源：原创 2025/8/21 4:48:35

效果图

在这里插入图片描述

代码

<script lang="ts" setup>
import { computed, ref, watch } from "vue";/*** 按钮属性接口*/
interface ButtonProps {/** 按钮类型：default(默认)/dark/plain/link */type?: "default" | "dark" | "plain" | "link";/** 禁用状态 */disabled?: boolean;/** 按钮内容 */text?: string;/** 图标组件 */icon?: any;/** 图标宽度 */iconWidth?: number | string;/** 图标高度 */iconHeight?: number | string;/** 按钮宽度 */width?: number | string;/** 按钮高度 */height?: number | string;/** 宽度自适应 */widthAuto?: boolean;/** 高度自适应 */heightAuto?: boolean;/** 水平内边距 */paddingX?: number | string;/** 垂直内边距 */paddingY?: number | string;/** 自定义背景色 */backgroundColor?: string;/** 自定义边框 */border?: string;
}const props = withDefaults(defineProps<ButtonProps>(), {type: "default",disabled: false,text: "",icon: undefined,iconWidth: 14,iconHeight: 14,width: 92,height: 32,widthAuto: false,heightAuto: false,paddingX: 0,paddingY: 0,backgroundColor: "",border: ""
});/*** 导入图标*/
const iconSrc = ref("");/*** 处理图标路径*/
const loadIcon = () => {if (!props.icon) {iconSrc.value = "";return;}// 直接使用传入的图标路径或对象iconSrc.value = props.icon;
};// 初始加载图标
loadIcon();// 监听图标属性变化，重新加载图标
watch(() => props.icon,() => {loadIcon();}
);// 计算样式
const buttonClass = computed(() => {return {"ds-button": true,[`ds-button--${props.type}`]: true,"is-disabled": props.disabled,"is-custom-style": props.backgroundColor || props.border};
});// 计算图标样式
const iconStyle = computed(() => {return {width:typeof props.iconWidth === "number"? `${props.iconWidth}px`: props.iconWidth,height:typeof props.iconHeight === "number"? `${props.iconHeight}px`: props.iconHeight,marginRight: props.text ? "4px" : "0"};
});// 计算按钮样式
const buttonStyle = computed(() => {const paddingXValue = typeof props.paddingX === "number" ? `${props.paddingX}px` : props.paddingX;const paddingYValue = typeof props.paddingY === "number" ? `${props.paddingY}px` : props.paddingY;const style = {width: props.widthAuto ? "auto" : (typeof props.width === "number" ? `${props.width}px` : props.width),height: props.heightAuto ? "auto" : (typeof props.height === "number" ? `${props.height}px` : props.height),padding: props.paddingX || props.paddingY ? `${paddingYValue} ${paddingXValue}` : "",boxSizing: "border-box" as const};// 添加自定义背景色 - 支持所有CSS颜色值（包括rgba、hex、颜色名称、渐变等）if (props.backgroundColor && !props.disabled) {style["background"] = props.backgroundColor;}// 添加自定义边框if (props.border) {style["border"] = props.border;}return style;
});const emit = defineEmits(["click"]);/*** 按钮点击事件处理* @param event 鼠标事件*/
const handleClick = (event: MouseEvent) => {if (props.disabled) return;emit("click", event);
};
</script><template><button:class="buttonClass":style="buttonStyle":disabled="disabled"@click="handleClick"><img v-if="icon" :src="iconSrc" :style="iconStyle" /><span v-if="text">{{ text }}</span><slot v-else /></button>
</template><style lang="scss" scoped>
.ds-button {display: flex;align-items: center;justify-content: center;padding: 4px 16px;font-size: 14px;font-weight: 600;text-align: center;cursor: pointer;border: none;border-radius: 4px;outline: none;transition: all 0.3s;&.is-custom-style {&:hover:not(.is-disabled) {opacity: 0.9;}&:active:not(.is-disabled) {opacity: 0.8;}&.is-disabled {opacity: 0.5;cursor: not-allowed;}}&--default {color: #fff;background: #06ad7e;&:hover:not(.is-disabled) {background: #07ca93;}&:active:not(.is-disabled) {background: #008661;}&.is-disabled {color: rgb(255 255 255 / 50%);cursor: not-allowed;background: rgb(6 173 126 / 50%);}}&--dark {color: #06ad7e;background: rgb(240 251 248 / 10%);&:hover:not(.is-disabled) {background: rgb(240 251 248 / 15%);}&:active:not(.is-disabled) {color: #008661;background: rgb(255 255 255 / 2%);}&.is-disabled {color: rgb(6 173 126 / 50%);cursor: not-allowed;background: rgb(240 251 248 / 5%);}}&--plain {color: #06ad7e;background: transparent;&:hover:not(.is-disabled) {background: rgb(255 255 255 / 5%);}&:active:not(.is-disabled) {color: #008661;background: rgb(255 255 255 / 2%);}&.is-disabled {color: rgb(6 173 126 / 50%);cursor: not-allowed;}}&--link {color: #06ad7e;background: transparent;padding: 4px 0;&:hover:not(.is-disabled) {color: #07ca93;background: transparent;}&:active:not(.is-disabled) {color: #008661;background: transparent;}&.is-disabled {color: rgb(6 173 126 / 50%);cursor: not-allowed;background: transparent;}}
}
</style>

文档

DsButton 按钮组件

一个自定义按钮组件，提供多种样式类型和状态，适用于系统中的各种交互场景。

功能特点

支持四种样式类型：默认(default)、暗色(dark)、朴素(plain)和链接(link)
可自定义按钮尺寸、内容和图标
支持自定义背景色(支持rgba、渐变等所有CSS背景值)和边框样式
支持禁用状态
支持宽高自适应和自定义内边距
响应式设计，适应不同场景

组件API

属性

属性名	说明	类型	可选值	默认值
type	按钮类型	string	default / dark / plain / link	default
disabled	禁用状态	boolean	true / false	false
text	按钮文本内容	string	-	‘’
icon	图标路径	string	-	undefined
iconWidth	图标宽度	number / string	-	14
iconHeight	图标高度	number / string	-	14
width	按钮宽度	number / string	-	92
height	按钮高度	number / string	-	32
widthAuto	宽度自适应	boolean	true / false	false
heightAuto	高度自适应	boolean	true / false	false
paddingX	水平内边距	number / string	-	0
paddingY	垂直内边距	number / string	-	0
backgroundColor	自定义背景色	string	所有CSS颜色值/渐变	‘’
border	自定义边框	string	CSS边框值	‘’

事件

事件名	说明	回调参数
click	点击按钮时触发	event: MouseEvent

使用示例

基础用法

<template><ds-button text="默认按钮" /><ds-button type="dark" text="暗色按钮" /><ds-button type="plain" text="朴素按钮" /><ds-button type="link" text="链接按钮" />
</template>

禁用状态

<template><ds-button text="默认按钮" disabled /><ds-button type="dark" text="暗色按钮" disabled /><ds-button type="plain" text="朴素按钮" disabled /><ds-button type="link" text="链接按钮" disabled />
</template>

带图标的按钮

<template><ds-button text="添加" icon="/src/assets/icons/add.png" /><ds-button type="plain" text="删除" icon="/src/assets/icons/delete.png" icon-width="16"icon-height="16"/><ds-button type="link" text="链接" icon="/src/assets/icons/link.png" />
</template>

自定义背景色和边框

<template><!-- 自定义背景色 - 十六进制 --><ds-button text="蓝色按钮" background-color="#3a7afe"/><!-- 自定义背景色 - rgba --><ds-button text="半透明按钮" background-color="rgba(58, 122, 254, 0.7)"/><!-- 自定义背景色 - 渐变 --><ds-button text="渐变按钮" background-color="linear-gradient(90deg, #3a7afe, #6c5ce7)"width="120"/><!-- 自定义边框 --><ds-button text="带边框按钮" type="plain"border="1px solid #34564c"/><!-- 背景色和边框都自定义 --><ds-button text="自定义样式" background-color="rgba(255, 103, 0, 0.8)"border="1px solid #ff6700"/>
</template>

自定义尺寸

<template><ds-button text="小按钮" width="80" height="28" /><ds-button text="中等按钮" width="100" height="36" /><ds-button text="大按钮" width="120" height="44" />
</template>

宽高自适应

<template><ds-button text="宽度自适应" width-auto /><ds-button text="高度自适应" height-auto /><ds-button text="宽高都自适应" width-auto height-auto />
</template>

自定义内边距

<template><ds-button text="自定义内边距" padding-x="20" padding-y="10" /><ds-button type="dark" text="更大的内边距" padding-x="30" padding-y="15"width-auto/>
</template>

使用插槽

除了使用text属性设置按钮内容外，还可以使用默认插槽：

<template><ds-button><span style="color: yellow">自定义内容</span></ds-button>
</template>

样式定制

按钮具有四种基本类型，每种类型有不同的样式：

default: 绿色背景，白色文字
- 悬停时背景色变亮
- 按下时背景色变暗
- 禁用时透明度降低
dark: 半透明背景，绿色文字
- 悬停时背景色变亮
- 按下时文字颜色变暗
- 禁用时透明度降低
plain: 透明背景，绿色文字
- 悬停时有轻微背景色
- 按下时文字颜色变暗
- 禁用时透明度降低
link: 透明背景，绿色文字，无边框和内边距
- 悬停时文字颜色变亮，无背景色变化
- 按下时文字颜色变暗，无背景色变化
- 禁用时透明度降低，鼠标样式为禁用状态

自定义样式

除了预设的四种类型，还可以通过以下属性自定义按钮样式：

backgroundColor: 设置按钮的背景，支持所有CSS背景属性值：
- 十六进制颜色：#3a7afe
- RGB/RGBA颜色：rgb(58, 122, 254) 或 rgba(58, 122, 254, 0.7)
- 颜色名称：blue、red 等
- 渐变：linear-gradient(90deg, #3a7afe, #6c5ce7)
- 其他CSS背景值
border: 设置按钮的边框样式，可使用任何有效的CSS边框值

当使用自定义背景色或边框时，按钮的悬停和激活效果会变为透明度变化。

全局注册

该组件已通过index.ts配置为可全局注册：

import DsButton from '@/components/DsButton';app.use(DsButton);

注册后，可在任何组件中直接使用<ds-button>标签，无需单独导入。

注册入口

import type { App } from "vue";
import Button from "./index.vue";/*** 注册按钮组件*/
export default {install(app: App) {app.component("DsButton", Button);}
};export { Button as DsButton };

使用原生button封装一个通用按钮组件

效果图代码 <script lang"ts" setup> import { computed, ref, watch } from "vue";/*** 按钮属性接口*/ interface ButtonProps {/** 按钮类型：default(默认)/dark/plain/link */type?: "default" | "dark" | &q…...

编程日记 2025/8/21 4:48:35

osu ai 论文笔记 DQN

e https://theses.liacs.nl/pdf/2019-2020-SteeJvander.pdf Creating an AI for the Rhytm Game osu! 20年的论文用监督学习训练移动模型100首歌能达到95准确率点击模型用DQN两千首歌65准确率 V抖用的居然不是强化学习？ 5,6星打96准确度还是有的东西的这是5.…...

编程日记 2025/8/21 12:11:37

perf的架构 1.perf event event are pure kernel counters, in this case they are called software events. Examples include: context-switches, minor-faults.events is the processor itself and its Performance Monitoring Unit (PMU). It provides a list of events …...

编程日记 2025/8/21 10:31:53

【MCP教程】Claude Desktop 如何连接部署在远程的remote mcp server服务器(remote host)

前言最近MCP特别火热，笔者自己也根据官方文档尝试了下。官方文档给的Demo是在本地部署一个weather.py，然后用本地的Claude Desktop去访问该mcp服务器，从而完成工具的调用： 但是，问题来了，Claude Deskto…...

编程日记 2025/8/16 21:45:33

使用python帮助艺术家完成角色动画和服装模型等任务

使用python帮助艺术家完成角色动画和服装模型等任务声明：克隆项目第 1 步：准备 Python 环境第 2 步：安装依赖✅ 第 3 步：运行项目主入口报错：报错：**降级 Python 到 3.10 或 3.11**推荐版本： 创…...

编程日记 2025/8/21 4:22:55

Python爬虫实战：基于 Python Scrapy 框架的百度指数数据爬取研究

一、引言 1.1 研究背景在当今信息时代，市场调研和趋势分析对于企业和研究机构至关重要。百度指数能够精准反映关键词在百度搜索引擎上的热度变化情况，为市场需求洞察、消费者兴趣分析等提供了极具价值的数据支持。通过对百度指数数据的爬取和分析，企业可以及时调整营销策略…...

编程日记 2025/8/19 15:10:31

【Python】python系列之函数闭包概念

目录一、函数二、闭包 2.1 概念 2.2闭包的应用场景 2.3代码实例实例 1：简单计数器闭包实例 2：带参数的闭包实例 3：闭包用于数据封装和隐藏一、函数函数是实现特定功能的代码段的封装，在需要时可以多次调用函数来实…...

编程日记 2025/8/17 21:23:28

【React】什么是 Hook

useStateuseEffectuseRef 什么是hook？16.8版本出现的新特性。可以在不编写class组件的情况下使用state以及其它的React特性为什么有hook？class组件很难提取公共的重用的代码，然后反复使用；不编写类组件也可以使用类组件的状态st…...

编程日记 2025/8/17 8:31:13

香港科技大学广州｜智能交通学域博士招生宣讲会—北京理工大学专场

香港科技大学广州｜智能交通学域博士招生宣讲会—北京理工大学专场 🕙时间：4月23日（星期三）16:00 🏠地点：北京理工大学中关村校区唯实报告厅 🔗报名链接：https://www.wj…...

编程日记 2025/8/19 12:29:02

食品计算—Coarse-to-fine nutrition prediction

🌟🌟 欢迎来到我的技术小筑，一个专为技术探索者打造的交流空间。在这里，我们不仅分享代码的智慧，还探讨技术的深度与广度。无论您是资深开发者还是技术新手，这里都有一片属于您的天空。让我们在知识的海洋中…...

编程日记 2025/8/19 14:24:33

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（6）：ながら一边。。一边

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（6）：ながら一边。。一边 1、前言（1）情况说明（2）工程师的信仰 2、知识点（1）ながら1）一边。。一边2&#xff0…...

编程日记 2025/8/20 1:51:20

Electricity Market Optimization(VI) - 机组组合模型以及 Gurobi 求解

本文参考链接：link \hspace{1.6em} 机组组合问题在电力系统中非常重要，这个问题也是一个优化问题，研究的就是如何调度现有的机组，调度的对象是以煤炭、石油、天然气为燃料的火力发电机以及水力发电机等可预测处理的发电机组&#…...

编程日记 2025/8/21 7:25:15

LoRA个关键超参数：`LoRA_rank`（通常简称为 `rank` 或 `r`）和 `LoRA_alpha`（通常简称为 `alpha`）

LoRA (Low-Rank Adaptation) 中的两个关键超参数：LoRA_rank（通常简称为 rank 或 r）和 LoRA_alpha（通常简称为 alpha）。 LoRA 的核心思想是，在对大型预训练模型（如 LLM 或 Stable Diffusion&…...

编程日记 2025/8/21 4:27:40

Sql刷题日志（day3）

一、笔试 1、min(date_time)：求最早日期 2、mysql中distinct不能与order by 连用，可以用group by去重二、面试 1、SQL中如何利用replace函数统计给定重复字段在字符串中的出现次数 (length(all_string)-length(all_string,目标字符串,))/length(ta…...

编程日记 2025/8/20 8:11:29

【AI插件开发】Notepad++ AI插件开发实践：实现对话窗口功能

引言之前的文章已经介绍实现了AI对话窗口，但只有个空壳，没有实现功能。本次将集中完成对话窗口的功能，主要内容为： 模型动态切换：支持运行时加载配置的AI模型列表交互式输入处理：实现多行文本输入与Ctrl…...

编程日记 2025/8/17 18:27:45

[GESP202409 二级] 小杨的 N 字矩阵题解

#include<bits/stdc.h> #define int long long using namespace std; int m, a[55][55], sum; signed main(){cin >> m;for(int i 1; i < m; i ){a[i][1] 1;//第一列a[i][m] 1;//第m列sum ;a[i][sum] 1;//斜着的}for(int i 1; i < m; i ){for(int j 1;…...

编程日记 2025/8/17 20:34:37

第八章：探索新兴趋势：Agent 框架、产品与开源力量

引言在前两章的实战中，我们已经掌握了如何使用 LangChain、LlamaIndex、AutoGen 和 CrewAI 这些主流框架来构建 AI Agent，无论是单个智能体还是协作的多 Agent 系统。然而，AI Agent 领域的发展日新月异，如同奔腾的河流&#xff…...

编程日记 2025/8/17 20:39:46

条款05：了解C++默默编写并调用哪些函数

目录 1.默认生成的函数 2.无法生成的情况 2.1当成员函数有引用或者被const修饰 2.2.operator在基类被私有 1.默认生成的函数 class empty {};//相当于class empty { public:empty(){ ... } // 构造函数empty(const empty& rhs) { ... }// 拷贝构造~empty(){ ... } //…...

编程日记 2025/8/19 6:40:14

Vue3 中封装函数实现加载图片加载失败兜底方案。

文章目录 Vue3 中使用动态加载图片并处理加载失败的情况实现思路代码实现代码解析注意事项扩展功能总结 Vue3 中使用动态加载图片并处理加载失败的情况在开发 Vue3 应用时，我们经常会遇到需要动态加载图片的场景。例如，图片资源可能从后端获取&#xf…...

编程日记 2025/8/19 14:59:35

微机控制电液伺服汽车减震器动态试验系统

微机控制电液伺服汽车减震器动态试验系统，用于对汽车筒式减震器、减震器台架、驾驶室减震装置、发动机悬置软垫总成、发动机前置楔形支撑总成等的示功图试验、速度特性试验。主要的技术参数： 1、最大试验力：5kN； 2、试验力测量精…...

编程日记 2025/8/20 22:00:10

如何简单几步使用 FFmpeg 将任何音频转为 MP3？

在多媒体处理领域，FFmpeg 以其强大的功能和灵活性而闻名。无论是视频编辑、音频转换还是流媒体处理，它都是专业人士和技术爱好者的首选工具之一。在这篇文章中简鹿办公将重点介绍如何使用 FFmpeg 进行音频格式转换，提供一些常用的转换方式&am…...

编程日记 2025/8/17 18:21:32

【软考-系统架构设计师】ATAM方法及效用树

软件架构设计中ATAM方法及效用树深度解析一、ATAM方法核心框架与流程 ATAM（架构权衡分析方法）是由卡耐基梅隆大学提出的系统性架构评估方法，旨在通过多维度质量属性分析识别架构风险、敏感点与权衡点。其实施流程分为四阶段九步骤&#xf…...

编程日记 2025/8/21 2:34:26

2025第十七届“华中杯”大学生数学建模挑战赛题目B 题校园共享单车的调度与维护问题完整成品正文33页（不含附录）文章思路模型代码结果分享

校园共享单车运营优化与调度模型研究摘要本研究聚焦校园共享单车点位布局、供需平衡、运营效率及故障车辆回收四大核心问题，通过构建一系列数学模型，系统分析与优化共享单车的运维体系。针对问题一，我们建立了基于多时段观测的库存估算…...

编程日记 2025/8/21 7:18:12

React Native 0.79 稳定版发布，更快的工具、更多改进

React Native 0.79 已发布。此版本在多个方面进行了性能改进，并修复了一些漏洞。首先，得益于延迟哈希技术，Metro 的启动速度变快了，并且对包导出提供了稳定支持。由于 JS 包压缩方式的改变等原因，Android 的启动时间也…...

编程日记 2025/8/17 18:25:57

中国AI应用革命开启新纪元：从DeepSeek燎原到全栈生态崛起

当生成式AI的星火点燃华夏大地，一场由DeepSeek引发的智能革命正在重构中国产业版图。在这场算力与智慧的角逐中，全产业链的协同创新正在书写中国式AI进化的新范式。一、全栈突围：AI基础设施生态全面升维云端启航：头部云服务商…...

编程日记 2025/8/17 20:21:54

生物系统中的随机性及AI拓展

生物系统远非确定性的机器，而是本质上充满噪声的。这种随机性，或称偶然性，在塑造细胞行为和结果方面起着至关重要的作用。从基因表达到细胞命运决定，波动和不可预测的事件可以显著影响生物过程。理解和建模这种固有的变异性对于全…...

编程日记 2025/8/21 3:29:31

智能交响：EtherCAT转Profinet网关开启汽车自动化通信新纪元

在汽车制造行业，随着自动化程度的不断提升，设备之间的高效通信显得尤为重要。以吉利汽车西安制造基地为例，生产线中广泛应用了西门子PLC与机器人手臂等设备，这些设备分别采用了Profinet和EtherCAT通信协议。为实现不同协议设备之间…...

编程日记 2025/8/19 8:17:50

【2025“华中杯”大学生数学建模挑战赛】选题分析 A题详细解题思路

目录 2025“华中杯”大学生数学建模挑战赛选题分析A题：晶硅片产销策略优化B题：校园共享单车的调度与维护问题C题：就业状态分析与预测D题：患者院内转运不良事件的分析与预测 A 题晶硅片产销策略优化问题 1：月利润计算模…...

编程日记 2025/8/18 1:04:50

springboot整合阿里云百炼DeepSeek,实现sse流式打印

1.开通阿里云百炼,获取到key 官方文档地址 https://bailian.console.aliyun.com/?tabapi#/api/?typemodel&urlhttps%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F2868565.html 2.新建SpringBoot项目 <?xml version"1.0" encoding"UTF-8"?&g…...

编程日记 2025/8/21 1:33:47

JMeter中设置HTTPS请求

在JMeter中设置HTTPS请求，你可以按照以下步骤进行操作： 步骤一：添加线程组打开JMeter后，右键点击“测试计划”，选择“添加” -> “线程（用户）” -> “线程组”。线程组用于定义虚拟用户…...

编程日记 2025/8/20 2:21:27

oracle数据库中，merge into 语句的功能与使用场景

oracle数据库中，merge into 语句的功能与使用场景一、MERGE INTO 语句的作用 MERGE INTO 是ORACLE数据库 SQL 中的一种数据操作语句，它结合了 INSERT、UPDATE 和 DELETE 操作的功能，通常被称为"upsert"操作（update …...

编程日记 2025/8/19 6:46:49

极狐GitLab 安全文件管理功能介绍

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网安全文件管理 (BASIC SELF) 在极狐GitLab 15.6 中 GA，功能标志 ci_secure_files 被移除。您可以将最多 100 个…...

编程日记 2025/8/17 19:49:52

极狐GitLab CI/CD 流水线计算分钟数如何管理？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网计算分钟管理 (PREMIUM SELF) 在极狐GitLab 16.1 中，从 CI/CD 分钟数重命名为计算配额或计算分钟数。管理员可…...

编程日记 2025/8/17 5:38:33

XCZU4CG‑2SFVC784I 赛灵思 FPGA XilinxZynq UltraScale+ MPSoC

XCZU4CG‑2SFVC784I 是 AMD Xilinx Zynq UltraScale MPSoC CG 系列中的入门级高性能 SoC FPGA，集成了双核 Arm Cortex‑A53 通用处理器与双核 Arm Cortex‑R5F 实时处理器，以及可编程逻辑（PL）资源。异构处理系统 (PS) 应用处理…...

编程日记 2025/8/20 13:04:16

软考中级软件设计师考点知识点笔记总结 day13 数据库系统基础知识数据库模式映像数据模型

文章目录数据库系统基础知识6.1 基本概念6.1.1 DBMS的特征与分类 6.2 数据库三级模式两级映像6.3 数据库的分析与设计过程6.4 数据模型6.4.1 ER模型6.4.2 关系模型数据库系统基础知识基本概念数据库三级模式两级映像数据库的分析与设计过程数据模型关系代数数据库完整…...

编程日记 2025/8/17 10:26:56

视频监控EasyCVR视频汇聚平台接入海康监控摄像头如何配置http监听功能？

一、方案概述本方案主要通过EasyCVR视频管理平台，实现报警信息的高效传输与实时监控。海康监控设备能通过HTTP协议将报警信息发送至指定的目的IP或域名，而EasyCVR平台则可以接收并处理这些报警信息，同时提供丰富的监控与管理功能&#xff0…...

编程日记 2025/8/17 21:30:40

【八大排序】冒泡、直接选择、直接插入、希尔、堆、归并、快速、计数排序

目录一、排序的介绍二、排序算法的实现2.1 直接插入排序2.2 希尔排序2.3 直接选择排序2.4 堆排序2.5 冒泡排序2.6 快速排序2.7 归并排序2.8 比较排序算法的性能展示2.9 计数排序个人主页<— 数据结构专栏<— 一、排序的介绍我们的生活中有很多排序，比如像…...

编程日记 2025/8/19 7:48:02

AI在市场营销分析中的核心应用及价值，分场景详细说明

以下是 AI在市场营销分析中的核心应用及价值，分场景详细说明： 1. 客户行为分析与细分 AI技术应用： 机器学习：分析用户点击、购买、浏览等行为数据，识别消费模式（如高频购买时段、偏好品类）。聚…...

编程日记 2025/8/17 20:36:32

本地Ubuntu轻松部署高效性能监控平台SigNoz与远程使用教程

目录 ⛳️推荐前言 1.关于SigNoz 2.本地部署SigNoz 3.SigNoz简单使用 4. 安装内网穿透 5.配置SigNoz公网地址 6. 配置固定公网地址 ⛳️推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击…...

编程日记 2025/8/19 7:34:49

解析检验平板：设备还是非设备？深入了解其功能与应用(北重铸铁平台厂家)

检验平板通常被归类为设备，因为它们具有特定的功能，并且被用于测试和评估其他设备或产品的性能和质量。检验平板通常具有平坦的表面，用于放置要进行测试或检验的物品。它们可以用于测量尺寸、形状、平整度、表面光洁度等参数。检验平板的应…...

编程日记 2025/8/20 14:06:18

【创新实训个人博客】前端实现

一、目标设定与初步改造核心目标: 对 visualizer 的前端界面 (index.html, style.css) 进行现代化改造。基础样式： 初始化页面整体风格，为 body 添加了动态渐变背景；初步调整了页面顶部导航按钮、信息提示块 (Log Visualizer) 及底部任务…...

编程日记 2025/8/17 18:25:16

vue3、原生html交互传值

1、引入原生html 将该文件放到public目录下，在vue项目里面使用iframe 引入该文件，监听load事件(load事件在<iframe>的内容完全加载完成之后触发) <iframeload"onIframeLoad"style"width: 454px; height: 480px"src".…...

编程日记 2025/8/19 19:54:42

于 Jupyter 天地，借 NumPy 之手编织数据锦缎

引言 NumPy是Python科学计算的核心库之一，提供了强大的多维数组对象和丰富的数学函数，是数据科学、机器学习等领域不可或缺的工具。结合Jupyter Notebook的交互式环境，NumPy的使用变得更加直观和高效。本文将介绍如何在Jupyter中充分利用NumP…...

编程日记 2025/8/17 1:30:04

Mac idea WordExcel等文件git modify 一直提示修改状态

CRLF LF CR 换行符自动转换问题查看状态：git config --global --list Mac需要开启，window下需要关闭关闭命令：git config --global core.autocrlf false 命令解释： autocrlf true 表示要求git在提交时将crlf转换为lf&a…...

编程日记 2025/8/20 7:30:45

代码学习总结（三）

代码学习总结（三）这个系列的博客是记录下自己学习代码的历程，有来自平台上的，有来自笔试题回忆的，主要基于 C++ 语言，包括题目内容，代码实现，思路，并会注明题目难度，保证代码运行结果 1 判断并构造 eleme 型字符串简单 eleme 型字符串判断与构造小红有一个长…...

编程日记 2025/8/20 4:10:36

Vue的Diff算法原理

Vue中的Diff算法（差异算法）是虚拟DOM的核心优化手段，用于对比新旧虚拟DOM树，找出最小变更，高效更新真实DOM，其设计目标是减少DOM操作次数，提升渲染性能 diff算法： 特点&#xff1a…...

编程日记 2025/8/19 23:10:50

CentOS系统-超详细的Kubernetes集群搭建教程(kubernetes:1.28.2)

小伙伴们，今天给大家带来一份超详细的Kubernetes集群搭建教程，保证让你从环境准备到安装验证，一路畅通无阻！🚀 🌈 ‌一、环境准备‌ 首先，咱们得确保硬件和软件环境都达标哦！ &am…...

编程日记 2025/8/17 10:25:00

自动驾驶系列—GLane3D: Detecting Lanes with Graph of 3D Keypoints

编程日记 2025/8/19 12:25:19

【Amazon 工具】在MacOS本地安装 AWS CLI、kubectl、eksctl工具

文章目录安装 AWS CLI安装 kubectl安装 eksctl参考链接安装 AWS CLI 创建访问密钥安装或更新 AWS CLI curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /要验证 Shell 是否可以在 $PAT…...

编程日记 2025/8/17 18:25:59

基于GTID的主从复制

MySQL主从复制实战指南（基于二进制日志）-CSDN博客二、基于GTID的主从复制基于 GTID 方式：全局事务标示符，自mysql5.6版本开启的新型复制方式。 GTID的组成：server_uuid：序列号 UUID：每个m…...

编程日记 2025/8/20 2:21:29

效果图

代码

文档