Vue3组件库开发 之Button(1)

需求分析:
Button 组件大部分关注样式,没有交互
根本分析可以得到具体的属性列表:
type:不同的样式(Default,Primary,Danger,Info,Success,Warning)
plain:样式的不同展现模式boolean
round:圆角boolean
circle:圆形按钮,适合图标boolean
size:不同大小(small/normal/large)
disabled:禁止boolean

Button 组件的本质
class='vk-button-primary vk-button-large is-plain is-round is-disabled'
vue官方基于vite的封闭工具 create-vue/eslint-config-typeScript
https//github.com/vuejs/create-vue

npm create vue@3
Vite+Vue3+TypeScript+Eslint

components
  Button.vue        组件
  style.css         样式
  type.ts           typescript类型
  Button.test.tsx   测试文件

1、新建项目

使用vite封装工程 create -vue

npm run dev

2、新建类型文件types.ts

3、Button组件

4、APP.vue显示自定义组件 

运行结果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

工具推荐 |Devv.ai — 最懂程序员的新一代 AI 搜索引擎

介绍 伴随 GPT 的出现,我们可以看到越来越多的 AI 产品,其中也不乏针对程序员做的代码生成工具。 今天介绍的这款产品是一款针对中文开发者的 AI 搜索引擎,Devv.ai 使用 Devv.ai 的使用非常简单,就是传统的搜索场景&#xff…

「简明教程」轻松掌握 MongDB 流式聚合操作

「简明教程」轻松掌握 MongDB 流式聚合操作 信息科学中的聚合是指对相关数据进行内容筛选、处理和归类并输出结果的过程。MongoDB 中的聚合是指同时对多个文档中的数据进行处理、筛选和归类并输出结果的过程。数据在聚合操作的过程中,就像是水流过一节一节的管道一…

C++ 程序文档生成器(doxygen)使用说明

程序文档,是每个程序员必看文档,在日常业务开发中,难免会封装一些组件。没有很好的组件文档,再好的组件都是废物,。因此大型业务中,文档和思维导图,两个都是必备! 一、注释风格 …

【面试合集】说说微信小程序的支付流程?

面试官:说说微信小程序的支付流程? 一、前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的API完成支付功能,方便、快捷 场景如下图所示: 用户通过分享或扫描二维码进入商…

[Python进阶] 正则表达式的验证

8.2 正则表达式的验证 正则表达式的语法很令人头疼,即使对经常使用它的人来说也是如此。由于难于读写,容易出错,所以找一种工具对正则表达式进行测试是很有必要的。 8.2.1 本地验证 通过Regex Tester这款软件可以在本地对正则表达式进行验…

机器学习算法实战案例:Informer实现多变量负荷预测

文章目录 机器学习算法实战案例系列答疑&技术交流1 实验数据集2 如何运行自己的数据集3 报错分析 机器学习算法实战案例系列 机器学习算法实战案例:确实可以封神了,时间序列预测算法最全总结! 机器学习算法实战案例:时间序列…

Linux shell编程学习笔记39:df命令

0 前言1 df命令的功能、格式和选项说明 1.1 df命令的功能1.2 df命令的格式1.3 df命令选项说明 2 df命令使用实例 2.1 df:显示主要文件系统信息2.2 df -a:显示所有文件系统信息2.3 df -t[]TYPE或--type[]TYPE:显示TYPE指定类型的文件系统信…

AIGC实战——像素卷积神经网络(PixelCNN)

AIGC实战——像素卷积神经网络 0. 前言1. PixelCNN 工作原理1.1 掩码卷积层 1.2 残差块2. 训练 PixelCNN3. PixelCNN 分析4. 使用混合分布改进 PixelCNN小结系列链接 0. 前言 像素卷积神经网络 (Pixel Convolutional Neural Network, PixelCNN) 是于 2016 年提出的一种图像生成…

LINUX基础培训九之网络管理

前言、本章学习目标 了解LINUX网络接口和主机名配置的方法熟悉网络相关的几个配置文件了解网关和路由熟悉网络相关的命令使用 一、网络IP地址配置 在Linux中配置IP地址的方法有以下这么几种: 1、图形界面配置IP地址(操作方式如Windows系统配置IP&…

机器学习:线性回归模型的原理、应用及优缺点

一、原理 线性回归是一种统计学和机器学习中常用的方法,用于建立变量之间线性关系的模型。其原理基于假设因变量(或响应变量)与自变量之间存在线性关系。 下面是线性回归模型的基本原理: 模型拟合: 通过最小二乘法&…

1、机器学习模型的工作方式

第一步,如果你是机器学习新手。 本课程所需数据集夸克网盘下载链接:https://pan.quark.cn/s/9b4e9a1246b2 提取码:uDzP 文章目录 1、简介2、决策树优化3、继续1、简介 我们将从机器学习模型如何工作以及如何使用它们的概述开始。如果你以前做过统计建模或机器学习,这可能感…

【Web】CTFSHOW 文件上传刷题记录(全)

期末考完终于可以好好学ctf了,先把这些该回顾的回顾完,直接rushjava! 目录 web151 web152 web153 web154-155 web156-159 web160 web161 web162-163 web164 web165 web166 web167 web168 web169-170 web151 如果直接上传php文…

生物制药厂污水处理需要哪些工艺设备

生物制药厂是一种特殊的工业场所,由于其生产过程中涉及的有机物较多,导致废水中含有高浓度的有机物和微生物等污染物,因此需要采用一些特殊的工艺设备来进行污水处理。本文将介绍生物制药厂污水处理中常用的工艺设备。 首先,对于生…

Java NIO (二)NIO Buffer类的重要方法(备份)

1 allocate()方法 在使用Buffer实例前,我们需要先获取Buffer子类的实例对象,并且分配内存空间。需要获取一个Buffer实例对象时,并不是使用子类的构造器来创建,而是调用子类的allocate()方法。 public class AllocateTest {static…

【FastAPI】路径参数(二)

预设值 如果你有一个接收路径参数的路径操作,但你希望预先设定可能的有效参数值,则可以使用标准的 Python Enum 类型。 导入 Enum 并创建一个继承自 str 和 Enum 的子类。通过从 str 继承,API 文档将能够知道这些值必须为 string 类型并且能…

PromptCast-时间序列预测的好文推荐

前言 这是关于大语言模型和时间序列预测结合的好文推荐,发现这篇文章,不仅idea不错和代码开源维护的不错,论文也比较详细(可能是顶刊而不是顶会,篇幅大,容易写清楚),并且关于它的Br…

STM32+HAL库驱动ADXL345传感器(SPI协议)

STM32HAL库驱动ADXL345传感器(SPI协议) ADXL345传感器简介实物STM32CubeMX配置SPI配置片选引脚配置串口配置 特别注意(重点部分)核心代码效果展示 ADXL345传感器简介 ADXL345 是 ADI 公司推出的基于 iMEMS 技术的 3 轴、数字输出加…

Spring Security- 基于角色的访问控制

基于角色 或权限 进行访问控制 hasAuthority方法 如果当前的主体具有指定的权限,则返回true,否则返回false 修改配置类 //当前登录用户 只有具备admins权限才可以访问这个路径.antMatchers("/test/index").hasAuthority("admins") 代码如下: package c…

达芬奇调色软件DaVinci Resolve Studio 18 中文激活版

DaVinci Resolve Studio 18是一款功能强大的视频编辑软件,它可以帮助用户轻松完成视频剪辑、调色、音频处理和特效合成等任务。 软件下载:DaVinci Resolve Studio 18 中文激活版下载 这款软件具有友好的用户界面和易于使用的功能,使得用户能够…

云服务器CVM_云主机_云计算服务器_弹性云服务器

腾讯云服务器CVM提供安全可靠的弹性计算服务,腾讯云明星级云服务器,弹性计算实时扩展或缩减计算资源,支持包年包月、按量计费和竞价实例计费模式,CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格,提供9个9的数…
最新文章