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…

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

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

第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…

[足式机器人]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…

鸿蒙开发笔记(九):渲染控制,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系统…

高精度算法笔记·····························

目录 加法 减法 乘法 除法 高精度加法的步骤&#xff1a; 1.高精度数字利用字符串读入 2.把字符串翻转存入两个整型数组A、B 3.从低位到高位&#xff0c;逐位求和&#xff0c;进位&#xff0c;存余 4.把数组C从高位到低位依次输出 1.2为准备 vector<int> A, B, …

考研机试题收获——高精度进制转换

代码的第一遍真的很重要&#xff0c;在第一次打的时候尽量把问题思考全面&#xff0c;不要漏打少打&#xff0c;尽量不要留bug给之后de。 一、基础方面 一、处理输出的结束问题 scanf和cin默认都不会读取空格 ①scanf()&#xff1a;如果从文件中读取数据&#xff0c;当scanf()…

小红书达人投放策略分析,品牌方必看

小红书已经成为品牌营销的重要战场&#xff0c;达人投放作为小红书营销的核心环节&#xff0c;其策略的精准与否直接关系到营销效果的好坏。本文伯乐网络传媒将对小红书达人投放的重要性、投放策略以及监测与优化进行深入探讨&#xff0c;以期为品牌提供更具实操性的营销建议。…

Python(36):调试过程中遇到的问题记录

错误1&#xff1a;TypeError: object of type NoneType has no len() 原因&#xff1a;这个错误是因为我们试图迭代那个不可迭代的对象。 原来方法&#xff1a;for i in rlen(data_list) 解决办法&#xff1a; for i in range(len(data_list)): 在循环中使用 range() 函数解决了…

Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

文章目录 前要&#xff1a;前端路由的概念与原理1&#xff09;什么是路由2&#xff09;SPA与前端路由3&#xff09;什么是前端路由4&#xff09;前端路由的工作方式 一、Vue-router简单使用1&#xff09;什么是vue-router2) vue-router 安装和配置的步骤① 安装 vue-router 包②…

Chrome 浏览器插件 cookies API 解析

Chrome.cookie 前端开发肯定少不了和 cookie 打交道&#xff0c;此文较详细的介绍下 chrome.cookie 的 API 以及在 popup、service worker、content 中如何获取的 一、权限&#xff08;Permissions&#xff09; 如果需使用 Cookie API&#xff0c;需要在 manifest.json 文件…

信驰达科技参与《汽车玻璃集成UWB数字钥匙发展研究白皮书》编制工作

为进一步探索汽车数字钥匙技术路线及开发思路&#xff0c;中国智能网联汽车产业创新联盟&#xff08;CAICV&#xff09;、福耀玻璃工业集团股份有限公司联合发起了《汽车玻璃集成UWB数字钥匙发展研究白皮书》研究工作。 2023年12月20日&#xff0c;由中国智能网联汽车产业创新…