第5章 Button 按钮

a总聊前端
109 阅读3分钟

button组件是UI界面中常见的元素，用于触发特定操作或提交表单。它通常包括一个可点击的区域，用于产生点击反馈效果，并提供适当的样式和状态变化（如普通状态、悬停状态和禁用状态）。button组件的设计需要考虑到可访问性、视觉吸引力以及一致性，以确保它在不同情境下能够提供良好的使用体验。

根据UI组件库设计稿可以看到button组件的多样性，如色调、悬停效果、图标、线框、圆角、加载状态等，我们将根据UI组件库设计稿逐步完成button组件的开发。

本章开发button组件的CSS样式处理将以原生的CSS语法书写样式，我们会在第6章介绍如何使用Sass语法通过变量的形式制定组件的主题效果。

5.1 theme：主题包

根据3.2.2建立UI组件库包的方法建立theme主题包。packages目录下新建theme目录作为UI组件库的主题样式包，在theme目录下执行pnpm init指令生成package.json文件，再将name属性的值更改为@ui-library/theme。最后在ui-library根目录下执行pnpm install @ui-library/theme -w安装theme主题包，如代码清单library-05-1所示。

代码清单library-05-1
> packages/theme/package.json
{
  "name": "@ui-library/theme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

> ui/library/package.json
{
  ...省略代码,
  "dependencies": {
    "@ui-library/components": "workspace:^",
    "@ui-library/hook": "workspace:^",
    "@ui-library/theme": "workspace:^",
    "@ui-library/utils": "workspace:^"
  }
}

5.1.1 全量引入

主题包安装完成后，便要为每个组件建立独立的样式文件。theme目录下新建src目录，并在src目录下新建index.scss和button.scss文件，然后将button.scss引入到index.scss文件中，最后在examples演示包中导入theme目录下的index.scss文件，如代码清单library-05-2所示。

> packages/theme/src/index.scss
@use "./button.scss"

> examples/src/main.js
import UILibrary from "../../packages"
import "@ui-library/theme/src/index.scss"****

theme主题包目前是基础型，我们将会在开发组件的过程一步步完善，也是在开发过程中学习如何处理theme主题包的变量以及有关于Sass预解析的应用。

如果在examples演示库出现Sass预解析错误，如图5-1所示，只需在examples演示库终端执行以下指令将sass和sass-loader解析器安装到开发环境。

安装 sass： npm install sass@1.55.0 -D。 安装 sass-loader：sass-loader@13.2.0 -D。

1.png

图5-1 sass解析错误

5.1.2 按需引入

按需引入是指处理数据时根据需要逐步导入的方式。如按需引入button组件时，会自动按需引入button组件所需要的CSS样式，而不会引入其他组件的CSS样式。按需引入能够根据实际需求灵活地管理数据的导入，节约资源并提高效率。，如代码清单library-04-6-1所示。

> packages\components\button\src\style\index.js：
import "@ui-library/theme/src/button.scss"

> examples/src/main.js
import UILibrary from "../../packages"
import "@ui-library/components/button/src/style"

上述代码清单button组件的src/style/index.js文件中引入theme主题包的button.scss样式文件（第2行），然后在examples演示包的main.js文件中引入button组件src/style下的index.js文件，此做法相当于从button组件中引入样式，也就是使用什么组件，就引入该组件下的src/style。

问题在于现在是手动按需引入，会导致引入组件时需要手动引入对应的组件样式，这样对于用户来说是很不友好的。为了避免用户手动引入样式，需要在按需引入组件时将对应组件的样式自动引入。而自动引入样式的动作需要在打包组件库时作处理，因此将会在第18章打包组件库时解决。

avatar
文章
阅读
粉丝