vue3--通用 button 组件实现

news2024/11/30 2:49:35

背景 

在日常开发中,我们一般都是利用一些诸如:element-ui、element-plus、ant-design等组件库去做我们的页面或者系统

这些对于一些后台管理系统来说是最好的选择,因为后台管理系统其实都是大同小异的,包括功能、布局结构等

但是对于前台项目,比如官网、门户网站这些

比如bilibili

以及王者荣耀官网

等等,我们不难发现这些前台项目(官网)等,它们的风格是不同的,那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了,就需要我们自己去自定义一些通用的组件

那么下面我们就从自定义一个button通用组件开始吧

分析

那么要实现一个通用的 button 组件,应该怎么去设计呢?它的步骤是什么?

下面这里列出几点常用的步骤(其余的可以自行拓展)

    <

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

StableDiffusion|833种艺术家风格项目,提示词直接上手! AI绘画文生图直接抄!

大家好&#xff0c;我是画画的小强 众所周知&#xff0c;Stable Diffusion是一个强大的文生图模型&#xff0c;能够根据用户的文本描述生成高质量的图像。在这个过程中&#xff0c;提示词&#xff08;Prompt&#xff09;的选择和构造具有至关重要的作用。提示词是向模型描述你…

RPA好用吗?RPA机器人如何使用?

数字化飞速发展的时代&#xff0c;企业越来越追求效率和成本控制&#xff0c;以期在激烈的市场竞争中保持领先地位。在此背景下&#xff0c;RPA机器人流程自动化作为一种能够提升业务流程效率的先进技术&#xff0c;成为助力企业数字化转型和高质量发展的强劲助力。那么&#x…

【前端】制作一个自己的网页(4)

刚才我们完成了网页中标题与段落元素的学习。在实际开发时&#xff0c;一个网页通常会包含多个相同元素&#xff0c;比如多个标题与段落。 对于相同标签的元素&#xff0c;我们又该如何区分定位呢&#xff1f; 对多个相同的标签分类 比如右图设置了七个段落元素&#xff0c;它…

Android ImageView scaleType使用

目录 一、src设置图片资源 二、scaleType设置图片缩放类型 三、scaleType具体表现 matrix&#xff1a; fitXY: fitStart&#xff1a; fitCenter&#xff1a; fitEnd: Center&#xff1a; centerCrop: centerInside&#xff1a; 控制ImageView和图片的大小保持一致…

实例详解 | 借助 Langchain 和 Gemma 2 构建 RAG 应用

本文将为您介绍如何使用 LangChain、NestJS 和 Gemma 2 构建关于 PDF 格式 Angular 书籍的 RAG 应用。接着&#xff0c;HTMX 和 Handlebar 模板引擎将响应呈现为列表。应用使用 LangChain 及其内置的 PDF 加载器来加载 PDF 书籍&#xff0c;并将文档拆分为小块。然后&#xff0…

【Golang】合理运用泛型,简化开发流程

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

测试用例如何进行评估?4个指标

测试用例评估是确保软件测试活动能够达到预期目标的关键步骤。评估测试用例的有效性和质量&#xff0c;对于确保软件产品的质量和可靠性至关重要。如果未对测试用例进行评估&#xff0c;可能导致测试用例不完整、不准确或无效&#xff0c;进而引发需求遗漏、测试不充分等问题&a…

241015_把一个文件夹中的所有图片按照序列命名

241015_把一个文件夹中的所有图片按照序列命名(数据集重命名) 在数据集制作过程中&#xff0c;我们经常会遇到合并图片数据集后命名格式不统一或者因重复命名自动添加&#xff08;1&#xff09;&#xff08;2&#xff09;的问题&#xff0c;以下是一段代码&#xff0c;对合并后…

中国研究员使用量子计算机破解 RSA 加密

由上海大学的 Wang Chao 领导的研究团队发现&#xff0c;D-Wave 的量子计算机可以优化问题解决&#xff0c;从而可以攻击 RSA 等加密方法。 中国研究人员公布了一种使用 D-Wave 的量子退火系统来破解经典加密的方法&#xff0c;这可能会加快量子计算机对广泛使用的加密系统构成…

推荐系统架构

推荐系统架构 推荐和搜索系统核心的的任务是从海量物品中找到用户感兴趣的内容。在这个背景下&#xff0c;推荐系统包含的模块非常多&#xff0c;每个模块将会有很多专业研究的工程和研究工程师&#xff0c;作为刚入门的应届生或者实习生很难对每个模块都有很深的理解&#xf…

鼠标右键删除使用Visual Studio 打开(v)以及恢复【超详细】

鼠标右键删除使用Visual Studio 打开&#xff08;v&#xff09; 1. 引言2. 打开注册表3. 进入对应的注册表地址4. 右键删除 AnyCode 项5. 效果6. 备份注册表文件——恢复菜单 1. 引言 安装完 Visual Studio 鼠标右键总有 “使用Visual Studio 打开(v)”&#xff0c;让右键菜单…

windows修改文件最后修改时间

一、需要修改日期的文件 背景&#xff1a;有时候我们需要做一些文件定期删除的操作&#xff0c;但是测试时候并不一定有符合测试的文件&#xff0c;这时候就需要可以方便的修改文件的最后修改时间。 系统环境&#xff1a;windows 测试文件&#xff1a;如上 修改时间方式&#x…

Linux网络编程(三)-UDP协议及网络通信详解

1.UDP协议 概念&#xff1a; 除了 TCP 协议外&#xff0c;还有 UDP 协议&#xff0c;想必大家都听过说&#xff0c;UDP 是 User Datagram Protocol 的简称&#xff0c;中文名是用户数据报协议&#xff0c;是一种无连接、不可靠的协议&#xff0c;同样它也是工作在传顺层。它只…

基于FreeRTOS的LWIP移植

目录 前言一、移植准备工作二、以太网固件库与驱动2.1 固件库文件添加2.2 库文件修改2.3 添加网卡驱动 三、LWIP 数据包和网络接口管理3.1 添加LWIP源文件3.2 Lwip文件修改3.2.1 修改cc.h3.2.2 修改lwipopts.h3.2.3 修改icmp.c3.2.4 修改sys_arch.h和sys_arch.c3.2.5 修改ether…

利用Python filestream实现文件流读

在 Python 中&#xff0c;文件流&#xff08;filestream&#xff09;操作通过内置的 open() 函数实现&#xff0c;它提供了对文件的读取、写入、以及流控制的支持。常见的文件模式包括&#xff1a; r&#xff1a;只读模式&#xff08;默认&#xff09;。w&#xff1a;写入模式…

用Python构建动态折线图:实时展示爬取数据的指南

背景/引言 随着大数据和人工智能的不断发展&#xff0c;实时数据分析变得越来越关键&#xff0c;尤其是在金融市场中。股市数据的实时可视化可以帮助投资者快速做出决策&#xff0c;避免错失良机。Python 凭借其强大的数据处理能力和丰富的可视化库&#xff0c;成为分析和展示…

你不是算法工程师,就可以不了解AI大模型技术吗?

身处人工智能的大浪潮之中&#xff0c;除了算法工程师&#xff0c;其他的角色也都应当对人工智能大模型技术有一定的了解。所以&#xff0c;笔者将针对“什么是人工智能&#xff1f;”“非技术人员对于人工智能大模型的理解存在哪些门槛&#xff1f;”等问题与大家分享自己的见…

项目集成工作流,走审批流程,activiti,springboot,集成工作流,业务审批,驳回,会签,流程设计

前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;一套完整并且实际运用在多套项目中的案例&#xff0c;满足日常业务流程审批需求。 项目源码配套文档获取&#xff1a;本文末个人名片直接获取。 一、项目形式 springboot…

健康补充维生素

在快节奏的现代生活中&#xff0c;健康养生已成为我们不可忽视的重要议题。而提及养生&#xff0c;维生素这一关键词往往跃然纸上&#xff0c;它们作为人体不可或缺的微量营养素&#xff0c;对维持生命活动、促进健康起着至关重要的作用。今天&#xff0c;就让我们深入探讨如何…

中小型医院网站:Spring Boot框架详解

5 系统实现 5.1 用户功能模块的实现 用户进入本系统可查看系统信息&#xff0c;包括首页、门诊信息、药库信息以及系统公告信息等&#xff0c;系统前台主界面展示如图5-1所示。 图5-1系统前台主界面图 5.1.1用户登录界面 用户要想实现预约挂号功能&#xff0c;必须登录系统&a…