09｜主题方案和基础组件：如何设计组件库的主题方案？
杨文坚
你好，我是杨文坚。
在上一节课的 Vue.js 3.x 自研组件库的开发入门中我提到，组件库有一个重要的作用，就是“可定制化主题”。那么，什么是“可定制化主题”呢？
如果你在电商企业中进行业务功能的前端页面开发，原有使用的组件库是蓝色风格的样式，但是想在节假日里快速转变成红色风格的组件样式，再比如，如果你开发的页面是亮色系的效果，哪天产品经理需要前端快速实现暗色系的黑夜效果，提升用户夜间的使用体验，那么，你会怎么做前端页面的改造呢？
这些场景，都要处理前端页面整体颜色以及视觉风格的变化，这类“变化”在前端开发中一般定义为“主题”的控制，也就是“可定制化主题”。
作为负责业务需求的前端开发者，一般都尽量专注业务功能点的开发，页面的主题风格定制能力通常是在组件库中管理。那么，组件库的前端开发者，就需要提供一套能控制组件的主题风格的组件库，提供给业务前端开发者直接使用。这样，业务前端开发者不需要关心组件库的主题方案如何实现，只需要根据组件库的使用规范“开箱即用”就好。
那么，如何设计组件库的主题实现呢？我们先来看看主题方案设计需要做什么准备。
组件库的主题方案设计需要做什么准备？
既然是方案设计，首先要做的是方案的规范准备，这里主题的方案设计需要准备以下两种规范：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了如何设计一个多状态的按钮组件，并通过实际代码演示展示了实现过程。作者首先提出了按钮组件的多种状态维度，包括按钮类型、按钮变种和按钮禁用状态，并提出了实现这些状态叠加管理的三个步骤。随后，文章详细展示了基础按钮组件样式的开发和不同维度组合的样式实现，包括使用Less代码和Vue代码示例。此外，作者还介绍了如何实现按钮禁用状态的样式，并展示了按钮组件的所有状态叠加效果。最后，文章提到了配置主题控制和样式主题切换效果的实现方法。通过这些内容，读者可以快速了解按钮组件设计的复杂度和实现方法，对于Vue.js 3.x开发者来说具有一定的参考价值。文章通过实际代码演示，让读者能够深入理解技术细节，为实际项目开发提供了有益的指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
- Geek_3afba8这个demo中的按需加载样式必须引入theme.less，编译出来的组件缺少CSS Variable 的定义
作者回复: 您好，按需加载的确需要把CSS Variable独立编译一份出来，提供按需使用。
2023-02-01归属地：广东 
ZR-rd老师您好，想问下光一个 Button 组件就需要定义这么多的 CSS 变量，并且这些 CSS 变量的命名都是有规律的，那么有没有什么办法可以批量生成这些变量，而不用手动定义这么多呢作者回复: 您好，CSS变量主要是语义化的颜色内容，比如Button组件的Primary，Secondary类型样式，这些有特定语义特点的CSS变量还是需要人工来定义。如果想批量自动化生成，就需要在设计稿层面来做技术处理，比如从设计师的设计稿内容，用插件或者脚本解析出CSS变量。
2022-12-19归属地：北京4
WGH丶尺寸控制也可以用梯度变量的模式，不放在一起，应该是为了减少耦合吧。对于程序员来说，一次只做一件事，把一件事做好是好策略。作者回复: 您好，这个理解的角度非常棒！
2022-12-18归属地：陕西- 林晓威老师你好，请问这个less样式里面为啥还要加&.@{prefix-name}-button?不是直接&-default-contained就可以了吗 .@{prefix-name}-button { // .... // contented &.@{prefix-name}-button-default-contained { ... }}
作者回复: 您好，这个是Less开发过程是否用简写的习惯，你可以根据自己习惯，或者是团队的约定自行选择是否要简写。 课程用这个写法，主要是考虑到大部分同学不一定熟悉Less，所以没直接用简写的方式。
2022-12-12归属地：广东 
escray
有一个小问题请教： 课后的源代码，如果试用 npm run dev:components 是可以进行开发状态下的调试的，显示也和专栏的内容一样。 但是如果试用 npm run dev:business 的话，就会报错，类似于 $ npm run build │ > build │ > npm run build:components && npm run build:dts && npm run build:css │ > build:components │ > vite-node ./scripts/build-module.ts │ [TS] 开始编译所有子模块··· │ [TS] 编译所有子模块成功！ │ > build:dts │ > vite-node ./scripts/build-dts.ts │ [Dts] 开始编译d.ts文件··· │ packages/components/src/button/button.vue.ts:4:6 - error TS6196: 'ButtonType' is declared but never used. │ 4 type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger'; │ ~~~~~~~~~~ │ packages/components/src/button/button.vue.ts:6:6 - error TS6196: 'ButtonVariant' is declared but never used. │ 6 type ButtonVariant = 'contained' | 'outlined'; 似乎应该是配置文件的原因，但是确实无从下手，请教2023-12-14归属地：北京
收起评论