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

HelloWorldZ

发布于 2024-05-24 14:11:21

830

发布于 2024-05-24 14:11:21

文章被收录于专栏：前端开发前端开发

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

普通按钮

朴素按钮

按钮禁用

带图标

按钮不同大小

加载中的按钮

水波纹效果的按钮

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'

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

直接进入正题：

button / src / button.vue

<script lang="ts" setup name="IkButton">
import { computed } from 'vue'
import { buttonProps } from './button'

const props = defineProps(buttonProps)
const emits = defineEmits(['click'])

const computedCls = computed(() => {
  const { type, disabled, loading, round, size, plain, ikun } = props
  return [
    'ik-button',
    `ik-button-${type}`,
    `ik-button-${size}`,
    {
      'ik-button-disabled': disabled || loading,
      'ik-button-plain': plain,
      'ik-button__round': round,
      // 'ik-button__ikun': ikun,
    },
  ]
})
const iconColor = computed(() => {
  if (!props.type || props.type === 'default') return ''
  return '#ffffff'
})

const onClick = () => {
  emits('click')
}

defineExpose({
  /** @description button type */
  type: props.type,
})
</script>
<template>
  <button :class="computedCls" @click="onClick" :disabled="props.disabled">
    <span class="ik-button__inner">
      <img v-if="ikun" width="20" src="https://laine001.github.io/ikun-ui/ikun.gif" />
      <ik-icon v-if="icon" :name="props.icon" :color="iconColor"></ik-icon>
      <ik-icon v-if="loading" name="loading" :color="iconColor" class="loading-icon"></ik-icon>
      <slot></slot>
    </span>
  </button>
</template>

button / src / button.ts

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-05-23，如有侵权请联系 cloudcommunity@tencent.com 删除

button