---

前言

今天这篇主要讲全局按钮组件封装，可根据UI设计师要求自定义修改。

---

Button组件

1. 功能分析

（1）可以通过className属性自定义按钮样式，传递样式类名来修改按钮的样式
（2）是否可点击由disabled属性控制，当disabled为true时，按钮被禁用
（3）加载状态由loading属性控制，当loading为true时，按钮显示加载动画

2. 代码+注释说明

// @/components/Button/index.tsx
import classNames from "classnames";
import styles from "./index.module.scss";

// 组件的属性类型
type Props = {
  // 按钮的文本
  text: string;
  // 自定义的类名
  className?: string;
  // 是否禁用按钮
  disabled?: boolean;
  // 是否显示加载动画
  loading?: boolean;
  // 点击按钮时的回调函数
  onClick: () => void;
};

// 按钮组件
export default (props: Props) => {
  // 解构属性
  const { text, className, disabled, loading, onClick } = props;
  return (
    // 按钮元素
    <button
      type="button"
      // 设置类名
      className={classNames(
        styles.container,
        // 禁用或加载时增加特定的类名
        (disabled || loading) && styles.isDisabled,
        className
      )}
      // 禁用时禁用快捷键操作
      onKeyDown={disabled ? undefined : onClick}
      // 禁用时禁用点击事件
      onClick={disabled ? undefined : onClick}
    >
      {/* 加载动画 */}
      {loading && <i className={`${styles.loading} iconfont icon-loading`}></i>}
      {/* 按钮文本 */}
      <span>{text}</span>
    </button>
  );
};
------------------------------------------------------------------------------
// @/components/Button/index.module.scss
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  color: #fff;
  background-color: var(--cd-primary-color);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  span {
    font-size: 14px;
    line-height: 14px;
  }
  &:hover {
    background-color: var(--cd-primary-color);
  }
  .isDisabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .loading {
    font-size: 24px;
    animation: rotate 2s linear infinite;
  }
}

3. 使用方式

// 引入组件
import Button from "@/components/Button";
import { useState } from 'react'
const [ loading,setLoading ] = useState(false)
// 使用
<Button text='确定' loading={loading} onClick={onDoneClick}></Button>

4. 效果展示

---

总结

下一篇讲【全局模态框Modal组件、公共弹窗Dialog组件封装】。关注本栏目，将实时更新。