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.mzph.cn/news/629984.shtml

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

相关文章

React入门 - 07(说一说 JSX 中的语法细节)

本章内容 目录 1、js 表达式2、列表渲染3、条件渲染4、className5、jsx 中的样式处理6、dangeouslySetInnerHTML7、htmlFor8、使用 jsx 的注意事项 上一节内容我们完成了一个简单的TodoList案例。到现在为止我们已经知道怎么在 JSX中使用 “js 表达式”和”列表渲染“了&#…

蓝桥杯 最长递增

输入 7 5 2 4 1 3 7 2 输出 3 思路 这个思路也很简单&#xff0c;后面大于前面&#xff0c;长度加一。当后面不大于前面的时候&#xff0c;就是一个新的递增序列了&#xff0c;递增序列的长度最小为1。 代码 #include <iostream> using namespace std; int main() {in…

Nginx初体验

文章目录 定义正向代理 & 反向代理安装与尝试 之前没怎么用过代理服务器Nginx&#xff0c;主要也是因为没有架构知识&#xff0c;根本不会去部署相关的机器。但是最近公司内部在调试的时候&#xff0c;经常用本机去充当Ngnix代理服务器&#xff0c;由于对这块知识掌握得还不…

leetcode—搜索二维矩阵II

编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10,13,14,17,2…

springboot(ssm校园便利平台 校园跑腿管理系统Java系统

springboot(ssm校园便利平台 校园便利店管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; …

【计算机网络】网络层——详解IP协议

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】 本专栏旨在分享学习计算机网络的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 &#x1f431;一、I…

JavaScript三元运算的基本语法是什么?

JavaScript中的三元运算是一种简洁的if-else表达方式&#xff0c;其基本语法如下&#xff1a; condition ? exprIfTrue : exprIfFalse其中&#xff0c;condition是一个返回值为布尔类型的表达式&#xff0c;exprIfTrue和exprIfFalse是在条件为真或假时执行的表达式。如果cond…

第29集《佛法修学概要》

丁三、声闻乘 分二&#xff1a;戊一、释义&#xff1b;戊二、四谛法&#xff1b;戊三、结示 请大家打开讲义第八十二页。我们看丁三&#xff0c;声闻乘。 在祖师大德的判教当中&#xff0c;把我们整个大乘的成佛之道分成了三个部分&#xff1a;第一个是安乐道&#xff0c;第…

【链路层】点对点协议 PPP

目录 1、PPP协议的特点 2、PPP协议的组成和帧格式 3、PPP协议的工作状态 目前使用得最广泛的数据链路层协议是点对点协议PPP(Point-to-Point Protocol)。 1、PPP协议的特点 我们知道&#xff0c;互联网用户通常都要连接到某个 ISP 才能接入到互联网。PPP 协议就是用户计算机…

全罐喂养是什么意思?适合猫咪全罐喂养的猫罐头推荐

猫咪全罐喂养的风一直挺大的&#xff0c;但是有好多养猫人一直不知道全罐喂养是什么意思&#xff0c;作为铲龄6年的宠物店店长&#xff0c;从早几年就开始全罐喂养了&#xff0c;对各个品牌的猫罐头也都很熟悉。 作为铲屎官&#xff0c;我们都想要给我猫猫吃的更好&#xff0c…

排序算法-希尔排序(含C语言代码示例)

一、算法介绍 希尔排序是一种基于插入排序的高效、不稳定的排序算法&#xff0c;它通过对待排序序列进行一系列间隔划分的子序列排序来改进插入排序的性能。该算法的基本思想是先将整个序列分割成若干个子序列&#xff0c;然后分别对各个子序列进行插入排序。这一过程通过逐渐减…

Redis面试题17

Redis 是如何处理并发访问的&#xff1f;有没有并发控制机制&#xff1f; 答&#xff1a;Redis 是单线程的&#xff0c;它使用了基于事件驱动的模型来处理并发访问。Redis 使用一个主事件循环来监听并处理客户端的连接和操作请求。 对于并发访问&#xff0c;Redis 使用了以下几…

openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c

文章目录 openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c概述笔记END openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c 概述 对私钥对明文做签名(摘要算法为SHA256) 用公钥对密文做验签(摘要算法为SHA256) 笔记 /*! \file rsa_pss_hash.c \note openss…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-16 Robust Controller非线性鲁棒控制器

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-16 Robust Controller非线性鲁棒控制器 1. Slide Control 滑膜控制2 High Gain High Frequency3. 三种鲁棒控制器的比较如何分析控制器 Robust Control : tp achieve rob…

基于云平台技术的GPS定位的浅谈

基于云平台技术的GPS定位的创新主要体现在以下几个方面&#xff1a; 数据存储和处理&#xff1a;云平台可以提供大规模的数据存储和计算资源&#xff0c;能够实时处理大量的GPS定位数据&#xff0c;提高了定位系统的处理能力和响应速度。 动态扩展性&#xff1a;云平台的弹性伸…

鸿蒙开发笔记(九):渲染控制,if/else,ForEach,LazyForEach

ArkUI通过自定义组件的build()函数和builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外&#xff0c;还可以使用渲染控制语句来辅助UI的构建&#xff0c;这些渲染控制语句包括控制组件是否显示的条件渲染语句&#xff0c;基于数组数据…

【代码随想录05】242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和

目录 242.有效的字母异位词题目描述做题思路参考代码 349. 两个数组的交集题目描述做题思路参考代码 202. 快乐数题目描述做题思路参考代码 1.两数之和题目描述参考代码 242.有效的字母异位词 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字…

父组件中 arr.push改变数组,但是子组件监听不到 arr 的变化

目录 一、问题 二、解决方法 三、总结 tiips:如嫌繁琐&#xff0c;直接移步总结即可&#xff01; 一、问题 1.真是奇怪呀&#xff0c;一般来说通过 push方法改变 数组&#xff0c;是一定会有响应式的&#xff0c;那就可以监听到变化。但是我今天却遇到了一件奇怪的事情。在…

k8s创建资源对象过程

我们都知道&#xff0c;K8S中一切皆资源&#xff0c;在使用K8S时&#xff0c;所有的pod或者controller都是通过yaml文件进行创建的。 那么接下来&#xff0c;就和大家一起看一下K8S是如何创建资源的。 创建资源对象的过程 Deployment是一种常见的资源对象。在Kubernetes系统…

pytorch学习(一)、tensorboard和torchvision

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、os模块二、from torch.utils.data import Dataset三、from torch.utils.tensorboard import SummaryWriter四、from torchvision import transforms五、torchvi…