小而美的IKUN-UI组件库源码学习(按钮 Button)

简介: 小而美的IKUN-UI组件库源码学习(按钮 Button)

组件库的按钮功能可以这样来总结:

普通按钮


朴素按钮


按钮禁用


带图标


按钮不同大小



加载中的按钮


水波纹效果的按钮


Props 属性


Events 事件


现在来看到button按钮的具体实现:

一切从这个文件 index.ts,开始 按钮 Button 源码的阅读:

index.ts 文件作为该 按钮 Button 的入口文件,这里导出了组件及其类型定义

import Button from './src/button.vue' // 导入Button组件
import { withInstall } from '../_utils/withInstall'  // 导入withInstall函数

const IkButton = withInstall(Button) // 使用withInstall函数来增强Button组件

export default IkButton // 将增强后的IkButton作为默认导出

export type { ButtonInstance, ButtonType } from './src/button' // 从./src/button导出ButtonInstance和ButtonType类型

这里为什么要这样处理呢?

export type { ButtonInstance, ButtonType } from './src/button'

这样做可以允许其他开发者在使用组件时能够进行类型检查。

现在直接进入正题:这里是我通过学习其的设计方式,然后跟着写了:

目录
相关文章
|
7月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
172 1
|
13天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
77 19
|
3月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
176 3
|
4月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
56 0
|
4月前
|
设计模式 前端开发 开发者
Angular携手Material Design:探索设计模式下的UI组件开发之道——从按钮到对话框的全面实战演示
【8月更文挑战第31天】在现代Web应用开发中,Angular框架结合Material Design设计原则与组件库,显著提升了用户界面的质量与开发效率。本文通过具体代码示例,详细介绍如何在Angular项目中引入并使用Material Design的UI组件,包括按钮、表单和对话框等,帮助开发者快速构建美观且功能强大的应用。通过这种方式,不仅能提高开发效率,还能确保界面设计的一致性和高质量,为用户提供卓越的体验。
34 0
|
6月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
68 7
【Android UI】自定义带按钮的标题栏
|
5月前
|
JavaScript
小而美的IKUN-UI组件库源码学习(前言)
小而美的IKUN-UI组件库源码学习(前言)
129 0
小而美的IKUN-UI组件库源码学习(前言)
|
5月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
817 0