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

鸿蒙Next如何自定义标签页

前言

项目需求是展示标签,标签的个数不定,一行展示不行就自行换行。但是,使用鸿蒙原生的 Grid 后发现特别的难看。然后就想着自定义控件。找了官方文档,发现2个重要的实现方法,但是,官方的demo中讲的很少,需要自己去看去思考。

效果图如下:
在这里插入图片描述
注意点:

  1. 需要计算整体布局的宽高,这和 Android 差不多。
  2. 注意 margin 的计算

具体的代码如下:

/*** 自定义标签页面*/
@Component struct CustomTagView {screenWidth: number = 0aboutToAppear(): void {let dis = display.getDefaultDisplaySync();let width = dis.widthlet height = dis.height// width 是单位是 px, 转换为 vp ,因为 onMeasureSize 和 onPlaceChildren 得到的 width margin 以及 padding 都是 vplet w = px2vp(width)let h = px2vp(height)this.screenWidth = wconsole.log("TagView aboutToAppear width = " + width + " , height = " + height + ", w = " + w + ", h = " + h)}@Builder childBuilder() {}@BuilderParam buildTagView: () => void = this.childBuilderresult: SizeResult = {width: 0,height: 0}// 第一步:计算各子组件的实际大小以及设置布局本身的大小onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) {let parentWidth = selfLayoutInfo.widthlet parentHeight = selfLayoutInfo.heightconsole.log("TagView onMeasureSize parentWidth = " + parentWidth + " , parentHeight = " + parentHeight)let startPosX = 0let columNumber = 1let childHeight = 0children.forEach((child) => {// 得到子控件的实际大小let result: MeasureResult = child.measure({minHeight: constraint.minHeight,minWidth: constraint.minWidth,maxWidth: constraint.maxWidth,maxHeight: constraint.maxHeight})let padding = child.getPadding()let border = child.getBorderWidth()console.log("TagView onMeasureSize = child width = " + result.width + "  ,  height = " + result.height+ " , padding = [" + padding.start + ", " + padding.end + ", " + padding.top + ", " + padding.bottom +"], border = ["+ border.start + ", " + border.end + ", " + border.top + ", " + border.bottom + "]")/// 计算 布局所需的高度, 宽度默认为屏幕的宽度childHeight = result.height + child.getMargin().topstartPosX += result.width + child.getMargin().startif (startPosX > parentWidth) {columNumber++startPosX = result.width + child.getMargin().start}})// 父布局的宽和高,即承载 child 布局的宽和高,这里指的就是 TagView 的宽和高this.result.width = this.screenWidth;this.result.height = childHeight * columNumber + 10 // 加10是为了底部多点空间return this.result;}// 第二步:放置各子组件的位置onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {let startPosX = 0let startPosY = 0let posY = 0let parentWidth = selfLayoutInfo.widthconsole.log("TagView onPlaceChildren parentWidth = " + selfLayoutInfo.width + " , parentHeight = " + selfLayoutInfo.height)children.forEach((child) => {startPosX += child.getMargin().start// 如果一行的控件的长度大于屏幕宽度则换行if (startPosX + child.measureResult.width > parentWidth) {startPosY += child.measureResult.height + child.getMargin().topstartPosX = child.getMargin().start}posY = startPosYconsole.log("TagView child width = " + child.measureResult.width + "  ,  height = " + child.measureResult.height +" , margin left = " + child.getMargin().start)child.layout({ x: startPosX, y: posY })startPosX += child.measureResult.width})}build() {this.buildTagView()}
}
调用的方法也很简单,下面是个调用的demo
@Entry
@Component
struct TestPage {@State name: string = 'hello'// @Provide 参数 key 必须是 string@Provide('provideName') pName: string = "哈哈"@Provide('count') count: number = 4textWidth: number = 0aboutToAppear(): void {let width = MeasureText.measureText({ textContent: '返厂无忧券1', fontSize: '13vp' });let w = px2vp(width)console.log("TestPage aboutToAppear >>>> width = " + width + " , w = " + w)// 如果有换行,那么长度等于最长的一行let textSize = MeasureText.measureTextSize({ textContent: '返厂无忧券1\n返厂无忧券1234', fontSize: '13vp' })let w2 = textSize.widthlet h2 = textSize.heightthis.textWidth = px2vp(w2 as number)console.log("TestPage aboutToAppear >>>> w2 = " + w2 + " , h2 = " + h2)}// @Build 参数按值传递,状态变量改变不会引起 @Build 方法内的 UI 刷新// 但是,Text(" ----- " + this.name) 中的 UI 会刷新@BuildernameView(name: string) {Text(name)}//  @Build 参数按引用传递的话,状态变量(@State name) 改变,@Build 方法内的 UI 会刷新@BuildernameView2(tmp: Tmp) {Text('V2 : name = ' + tmp.params)}// 通过builder的方式传递多个组件,作为自定义组件的一级子组件(即不包含容器组件,如Column)@BuilderTagViewChildren() {ForEach(['你好,哪吒2', '大圣归来啊', '我是名字超长的但是很厉害', 'hello world', '你真的好厉害啊哈哈', '没空看', '非凡','再来一个很长的名字啊', 'OK'],(data: string, index: number) => { // 暂不支持lazyForEach的写法Text(data).fontSize(13).fontColor(Color.Red).margin({ left: 3, top: 4 })// .width(100)// .height(100).borderWidth(1).border({ radius: 4 }).padding(5).textAlign(TextAlign.Center)// .offset({ x: 10, y: 20 })})}build() {Column() {Column() {CustomTagView({ buildTagView: this.TagViewChildren })}.backgroundColor(Color.Pink).margin({ top: 2 })}.width('100%').height('100%').alignItems(HorizontalAlign.Start)}
}

好了,具体的可以参考下 demo 啦,有疑问的可以一起交流。

相关文章:

鸿蒙Next如何自定义标签页

前言 项目需求是展示标签&#xff0c;标签的个数不定&#xff0c;一行展示不行就自行换行。但是&#xff0c;使用鸿蒙原生的 Grid 后发现特别的难看。然后就想着自定义控件。找了官方文档&#xff0c;发现2个重要的实现方法&#xff0c;但是&#xff0c;官方的demo中讲的很少&…...

一周学会Flask3 Python Web开发-Jinja2模板过滤器使用

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Jinja2中&#xff0c;过滤器(filter)是一些可以用来修改和过滤变量值的特殊函数&#xff0c;过滤器和变量用一个竖线 | &a…...

HarmonyOS 5.0应用开发——鸿蒙接入高德地图实现POI搜索

【高心星出品】 文章目录 鸿蒙接入高德地图实现POI搜索运行结果&#xff1a;准备地图编写ArkUI布局来加载HTML地图 鸿蒙接入高德地图实现POI搜索 在当今数字化时代&#xff0c;地图应用已成为移动设备中不可或缺的一部分。随着鸿蒙系统的日益普及&#xff0c;如何在鸿蒙应用中…...

浅谈HTTP及HTTPS协议

1.什么是HTTP&#xff1f; HTTP全称是超文本传输协议&#xff0c;是一种基于TCP协议的应用非常广泛的应用层协议。 1.1常见应用场景 一.浏览器与服务器之间的交互。 二.手机和服务器之间通信。 三。多个服务器之间的通信。 2.HTTP请求详解 2.1请求报文格式 我们首先看一下…...

内存泄漏指什么?常见的内存泄漏有哪些?

内存泄漏是指程序在运行过程中&#xff0c;由于某些原因导致程序无法释放已经不再使用的内存&#xff0c;使得这部分内存持续被占用&#xff0c;最终可能导致系统可用内存逐渐减少&#xff0c;严重时会影响系统性能甚至导致程序崩溃。&#xff08;内存泄漏是指程序中已经分配的…...

FFmpeg视频处理入门级教程

一、FFmpeg常规处理流程 #mermaid-svg-W8X1llNEyuYptV3I {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-W8X1llNEyuYptV3I .error-icon{fill:#552222;}#mermaid-svg-W8X1llNEyuYptV3I .error-text{fill:#552222;str…...

PINN求解固体力学问题——论文加代码

PINN求解固体力学问题——论文加代码 1. 训练2. 可视化 论文&#xff1a;Physics-Informed Deep Learning and its Application in Computational Solid and Fluid Mechanics 1. 训练 # %load Plane_Stress_W-PINNs.py """ Forward Problem for Plane Stress …...

HC32F460_SCI驱动(一)

在开始介绍HC32F460的SCI驱动之前,先重点说明一下功能组与串口相关参数,以便于更好的描述SCI驱动。 1. 功能组 1.1 基本概念 HC32F460的引脚功能复用机制通过Func_Grp(功能组)实现,其灵活性显著高于传统单片机(如STM32系列)。每个引脚支持多种外设功能,具体功能通过选…...

程序诗篇里的灵动笔触:指针绘就数据的梦幻蓝图

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 这一节我们来学习指针的相关知识&#xff0c;学习内存和地址&#xff0c;指针变量和地址&#xff0c;包…...

QT:QPen、QBrush、与图形抗锯齿的关联

QPen QPen 是 Qt 框架中用于定义绘图时使用的画笔属性的类。在使用 QPainter 进行 2D 绘图时&#xff0c;QPen 可以控制线条的外观&#xff0c;比如线条的颜色、宽度、样式&#xff08;如实线、虚线等&#xff09;、端点样式&#xff08;如方形端点、圆形端点等&#xff09;和…...

数据结构秘籍(一)线性数据结构

1.数组 数组&#xff08;Array&#xff09;是一种很常见的数据结构。它由相同类型的元素&#xff08;element&#xff09;组成&#xff0c;并且是使用一块连续的内存来存储。 我们直接可以利用元素的索引&#xff08;index&#xff09;计算出该元素对应的存储地址。 数组的特…...

【数据分享】2000-2024年全国逐年归一化植被指数(NDVI)栅格数据(年平均值)

NDVI&#xff0c;全名为Normalized Difference Vegetation Index&#xff0c;中文名称为归一化植被指数。这个指数可以用来定性和定量评价植被覆盖及其生长活力&#xff0c;我们也可以简单地将它理解为体现植被密度和健康状况的一个指标。 之前我们给大家分享了来源于MOD13A3数…...

解决前端计算的浮点精度问题

问题&#xff1a;比如1001*1.11等于110.11 但是如果用前端开发处理的话 &#xff0c;因为涉及到浮点数运算&#xff08;这是因为JavaScript&#xff08;以及其他许多编程语言&#xff09;使用IEEE 754标准来表示浮点数&#xff0c;导致某些十进制小数无法精确表示&#xff0c;…...

C语言基本知识------指针(4)

1. 回调函数是什么&#xff1f; 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#xff0c;被调⽤的函数就是回调函数。 void qsort(void base,//指针…...

004 Kafka异常处理

6.异常处理 文章目录 6.异常处理1.异常分类与处理原则2.生产者异常处理1. 同步发送捕获异常2. 异步发送回调处理 3.消费者异常处理1.全局异常处理器2.方法级处理3.重试yml配置 4.死信队列&#xff08;DLQ&#xff09;配置1. 启用死信队列2. 手动发送到DLQ 5.事务场景异常处理1.…...

C++模拟实现map和set

C模拟实现map和set 1、STL源代码分析2、实现出复用红黑树的框架3、实现红黑树的迭代器4、解决map和set中key不可修改问题5、解决insert返回值问题完整代码 模拟实现map和set实际上是对红黑树的封装&#xff0c;如对红黑树的实现有疑问&#xff0c;请移步&#xff1a;C手撕红黑树…...

使用elasticdump导出/导入 -- ES数据

导出指定索引数据到指定文件夹&#xff1a; ./elasticdump --inputhttp://用户:密码IP:9201/索引名字 --output导出路径/out.json --typedata 将导出的文件导入 ./elasticdump --input路径/out.json --outputhttp://账号:密码IP:9201/索引名称 --typedata --fileTypejson 【el…...

CSDN年度评选揭晓,永洪科技AI技术与智能应用双星闪耀

近日&#xff0c;永洪科技在CSDN&#xff08;中国专业开发者社区&#xff09;的年度评选中&#xff0c;凭借在人工智能技术创新与vividime在行业应用中的卓越表现&#xff0c;一举斩获“人工智能企业”及“智能应用”双料大奖。这一荣誉不仅彰显了永洪科技在AI领域的领先地位&a…...

Kubernetes 资源利用率翻倍?离在线混合部署深度解析

还在为 Kubernetes 集群资源利用率低而烦恼&#xff1f;还在为高昂的云成本而头疼&#xff1f;今天&#xff0c;我们就来聊聊 Kubernetes 中的一项黑科技——离在线混合部署&#xff0c;让大家的集群资源利用率翻倍&#xff0c;成本减半&#xff01; &#x1f914; 什么是离在线…...

【Java】Spring Boot全量YAML配置说明

目录 Spring Boot 配置文件基础核心配置日志配置Web 服务器配置数据源配置JPA 配置缓存配置国际化配置邮件服务配置自定义配置使用示例1. Spring Boot 配置文件基础 Spring Boot 的配置文件可以使用以下文件格式: application.propertiesapplication.ymlSpring Boot 默认加载…...

【STL】7.STL常用算法(1)

STL常用算法&#xff08;1&#xff09; 前言简介一.遍历算法1.for_each2.transform 二.查找算法1.find2.find_if3.adjacent_find4.binary_search5.count6.cout_if 三.排序算法1.sort2.random_shuffle3.merge4.reverse 总结 前言 stl系列主要讲述有关stl的文章&#xff0c;使用S…...

弱监督语义分割学习计划(1)-简单实现CAM但是效果不好

零: 项目说明 是这样的一个事情&#xff0c;经过与deepseek的一番讨论和交流&#xff0c;DeepSeek为我设计了一个30天高强度学习计划&#xff0c;重点聚焦弱监督/无监督语义分割在野外场景的应用&#xff0c;结合理论与实践&#xff0c;并最终导向可落地的开源项目。目前开始了…...

内存泄漏问题分享

在前端开发中&#xff0c;内存泄漏&#xff08;Memory Leak&#xff09;是指由于代码问题导致浏览器无法回收不再使用的内存&#xff0c;从而影响网页的性能&#xff0c;导致页面变慢&#xff0c;甚至崩溃。前端内存泄漏通常由以下几种原因引起&#xff0c;理解和修复这些问题对…...

用 DeepSeek 打样!KubeSphere LuBan 用 3 天/3 分钟“干掉”大模型部署焦虑

用 DeepSeek 打样&#xff01;KubeSphere LuBan 用 3 天/3 分钟“干掉”大模型部署焦虑 大模型落地&#xff0c;如何告别“部署焦虑”&#xff1f; DeepSeek-R1 的惊艳表现无需赘述&#xff0c;但企业落地时的高门槛却让许多开发者望而却步——复杂的部署流程、资源调度难题、…...

Java在云计算平台中的应用研究

Java在云计算平台中的应用研究 随着云计算的广泛应用&#xff0c;越来越多的企业和开发者开始选择基于云计算的架构来构建和部署应用。Java作为一种成熟的编程语言&#xff0c;凭借其跨平台性、强大的生态系统以及优秀的并发处理能力&#xff0c;已成为云计算平台中常用的编程…...

【学写LibreCAD】0 仿写LibreCAD简介

一、LibreCAD 核心模块&#xff1a; 核心模块&#xff08;Core&#xff09; 功能&#xff1a;处理 CAD 的核心逻辑&#xff0c;如几何计算、图形对象管理、坐标系转换等。关键组件&#xff1a; 图形对象&#xff1a;如直线、圆、圆弧、多段线等。数学工具&#xff1a;向量、矩…...

【质量管理】怎么评估职能部门当前质量管理成熟度

评估目的 在做质量管理时&#xff0c;我们需要先了解各职能部门当前质量管理成熟度。从而识别改进机会&#xff0c;为各职能部门后续质量提升计划提供依据。 直白说&#xff1a;就是让那些不肯动的人动起来&#xff0c;同时往往总经理对各部门的质量管理成熟度的评分要更低&…...

音乐游戏Dance Dance Revolution(DDR)模拟器

文章目录 &#xff08;一&#xff09;Dance Dance Revolution&#xff08;1.1&#xff09;基本情况&#xff08;1.2&#xff09;机体 &#xff08;二&#xff09;模拟器&#xff08;2.1&#xff09;主程序&#xff08;2.2&#xff09;模拟器主题 &#xff08;三&#xff09;曲谱…...

【Pandas】pandas Series filter

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐&#xff0c;使其具有相同的索引Series.case_when(caselist)用于根据条件列表对 Series 中的元素进行条件判断并返回相应的值Series.drop([lab…...

SpringBoot项目注入 traceId 来追踪整个请求的日志链路

SpringBoot项目注入 traceId 来追踪整个请求的日志链路&#xff0c;有了 traceId&#xff0c; 我们在排查问题的时候&#xff0c;可以迅速根据 traceId 查找到相关请求的日志&#xff0c;特别是在生产环境的时候&#xff0c;用户可能只提供一个错误截图&#xff0c;我们作为开发…...

UVM 软链接应用

软链接在环境中主要是为了代码复用&#xff0c;目前用到的场景有两种&#xff1a; 1&#xff09;将UT 环境的代码 链接到ST环境上复用&#xff1a; 将ut 的transaction和sequence等在ST上复用 使用方法 在st对应目录下执行命令&#xff1a; ln -s 。…/xxxx/UT/xxx/xx_transact…...

SCIKIT-LEARN 决策树实现csv文档简单的推论预测

一.学习背景 原文来自scikit-learn的学习拓展&#xff0c;根据樱花分类示例衍生而来。源文开源地址&#xff1a;scikit-learn: machine learning in Python — scikit-learn 0.16.1 documentation&#xff0c;想学机器学习和数据挖掘的可以去瞧瞧&#xff01; 二.读取csv文档 …...

VM虚拟机安装与配置Ubuntu Linux操作系统详细教程~

一、下载VM虚拟机 VMware16.0.zip百度网盘下载链接:https://pan.baidu.com/s/1-l-CcAVNINqhRLSiQ26R7w?pwd=tznn 提取码: tznn 二、软件介绍 VMware(虚拟机)是指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统,通过它可在一台电脑上同…...

使用 Ray的可观察性功能监控和调试 Ray 应用程序和集群

一、引言 在分布式系统中,监控和调试是确保系统稳定运行的关键环节。Ray 作为一款高性能的分布式计算框架,提供了丰富的可观察性(Observability)功能,帮助用户监控和调试 Ray 应用程序和集群。本文将详细介绍如何使用 Ray 的可观察性功能,包括监控工具、调试流程、日志管…...

jmeter 如何做移动端的测试 特别是兼容性测试

JMeter本身主要是一款用于性能测试和功能测试的工具,虽然它并非专门为移动端测试设计,但可以通过一些方式来对移动端应用进行测试,以下从测试准备、测试过程及注意事项等方面为你详细介绍: 一、测试准备 (一)环境搭建 JMeter安装与配置:确保JMeter已经正确安装在测试机…...

模板方法模式

模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;允许子类在不改变算法结构的情况下重写某些步骤的具体实现。 核心思想 抽象类定义模板方法&#xff08;final 修饰&#xff0c;防止子类修改…...

64位精度HPC计算引擎的十年博弈:AMD如何以性价比颠覆NVIDIA霸权?

若期望一款中央处理器&#xff08;CPU&#xff09;具备图形处理器&#xff08;GPU&#xff09;级别的浮点运算性能&#xff0c;根据CPU发展路线图&#xff0c;大约需等待六年左右。这显然是一段漫长的等待期&#xff0c;这也解释了为何十五年前众多高性能计算&#xff08;HPC&a…...

2P4M-ASEMI照明控制专用2P4M

编辑&#xff1a;ll 2P4M外观与基本结构 2P4M 可控硅通常封装在一个小巧的塑料外壳内&#xff0c;从外观上看&#xff0c;它有着几个标志性的引脚。一般为三脚结构&#xff0c;每个引脚都肩负着不同的使命。其内部结构精密复杂&#xff0c;核心是由多层半导体材料交替堆叠而成…...

【工程管理与安全工程方向 EI会议征稿 | EI Compendex、Scopus收录】2025年工程管理与安全工程国际学术会议 (EMSE 2025)

重要信息: 大会官网:www.ic-emse.com【论文投稿】 大会时间:2025年3月21-23日 大会地点:中国-南京 截稿时间:以官网信息为准 出版信息:<...

VMware work station 与Device/Credential Guard不兼容

1.出现如下错误 按 下Windows徽标键R 然后输入msinfo32.exe&#xff0c;会出现系统信息&#xff0c;在系统信息里找到基于虚拟化的安全性&#xff0c;查看是否打开 gpedit.msc 注册表修改...

STM32开发学习(三)----使用STM32CUBEMX创建项目

前言 开始正式接触代码&#xff0c;学习代码开发&#xff0c;先熟悉STM32CUBEMX软件&#xff0c;控制开发板的GPIO。(STM32F103C8T6)。 正式开始 1.打开软件 2.点击ACCESS TO MCU SELECTOR&#xff0c;进入软件选择&#xff0c;可能会弹出更新&#xff0c;等待更新完成即可。…...

smolagents学习笔记系列(七)Examples-Self-correcting Text-to-SQL

这篇文章锁定官网教程中 Examples 章节中的 Self-correcting Text-to-SQL 文章&#xff0c;主要介绍了如何使用 Agent 对数据库进行查找。 官网链接&#xff1a;https://huggingface.co/docs/smolagents/v1.9.2/en/examples/text_to_sql&#xff1b; 【注意事项】&#xff1a…...

ffmpeg常用方法(一)

FFmpeg是一个非常强大的开源项目&#xff0c;提供了一套可以用来录制、转换数字音频、视频&#xff0c;并能将其转换成不同格式的工具和库。它是命令行工具&#xff0c;意味着它没有图形用户界面&#xff0c;但它能够被嵌入到其他应用程序中。它支持多种操作系统&#xff0c;包…...

c++:多态

1.多态 多态就是多种形态的意思。 分为编译时多态&#xff0c;也叫静态多态&#xff0c;通过传递不同参数的方式使同一个函数好像实现了不同的状态。eg&#xff1a;函数模板&#xff0c;函数重载 还有运行时多态&#xff0c;也叫动态多态。通过使用不同的对象调用“同一个函数”…...

Nuxt.js 3【详解】服务器 Server

Nuxt.js 是一个全栈框架&#xff0c;可以在一个项目中&#xff0c;同时完成前端和后端的开发。 服务器架构 Nuxt.js 的服务端由 Nitro 实现&#xff0c;Nitro 由基于 H3 实现。 Nitro 官网 https://nitro.build/guideH3 官网 https://h3.unjs.io/guide 接口路由 基于文件目录自…...

DeepSeek回答:AI时代Go语言学习路线

最近有小伙伴经常会问&#xff1a;**该如何学习入门Go语言&#xff1f;怎样提升Go语言Coding水平&#xff1f;**这篇文章我们就使用DeepSeek来梳理下Go语言在AI时代的学习路线。 向DeepSeek提问的问题原文&#xff1a; 你现在是一名资深的Go语言工程师&#xff0c;精通Go语言并…...

OpenGL 04--GLSL、数据类型、Uniform、着色器类

一、着色器 在 OpenGL 中&#xff0c;着色器&#xff08;Shader&#xff09;是运行在 GPU 上的程序&#xff0c;用于处理图形渲染管线中的不同阶段。 这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。着色器…...

仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!

一、前言 在日常的前端项目开发中&#xff0c;我们时常需要使用到“消息提示”&#xff08;以下简称“消息”&#xff09;这个组件来帮助我们更好的给予用户提示&#xff0c;例如常见的“登录成功”、“操作成功”、“服务器异常”等等提示。 尽管市面上已经有一些组件库提供了…...

天猫代运营公司推荐:品融电商

天猫代运营公司推荐&#xff1a;品融电商 在电商行业竞争日益激烈的今天&#xff0c;选择一家专业的天猫代运营公司成为众多品牌商家提升市场竞争力、实现销售增长的关键。在众多代运营公司中&#xff0c;品融电商凭借其专业的团队、丰富的经验和显著的成功案例&#xff0c;脱…...

2025.2.26#Java开发中的鉴权机制详解

1、Java开发中的鉴权机制详解 用户问的是在Java开发中什么是鉴权。首先&#xff0c;我需要明确鉴权的定义。鉴权&#xff0c;也就是认证授权&#xff0c;是确认用户身份和权限的过程。可能用户刚接触安全相关的内容&#xff0c;需要简单明了的解释。 接下来&#xff0c;我应该分…...