小而美的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'

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

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

目录
相关文章
如何实现 CRM Attachment UI 的 Advanced 按钮
如何实现 CRM Attachment UI 的 Advanced 按钮
|
2月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
8月前
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
112 1
19-Vue之Element UI-按钮组件
19-Vue之Element UI-按钮组件
|
1月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
31 7
【Android UI】自定义带按钮的标题栏
|
5天前
|
JavaScript
小而美的IKUN-UI组件库源码学习(前言)
小而美的IKUN-UI组件库源码学习(前言)
7 0
小而美的IKUN-UI组件库源码学习(前言)
|
2月前
|
算法 API 开发者
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
396 1
|
8月前
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
382 0
|
10月前
|
Web App开发 前端开发 JavaScript
使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击试读版
使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击试读版
|
10月前
|
Web App开发 前端开发 JavaScript
使用函数节流思想避免 SAP UI5 应用里按钮短时间内被高频重复点击试读版
使用函数节流思想避免 SAP UI5 应用里按钮短时间内被高频重复点击试读版