Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级

大家好,我是不如摸鱼去,wot-ui 的主要维护者。

Wot UI 2.1.0 正式发布啦。

这次更新不是一个"大版本重构",但对日常开发体验很有帮助:ConfigProvider 的全局配置能力进一步增强,主题变量类型也更加清晰,同时修复了一批真实使用场景中反馈的问题。

如果你正在使用 Wot UI v2,建议升级体验。

ConfigProvider 支持组件全局配置

在之前的版本中,ConfigProvider 主要负责主题模式、主题变量等全局能力。

从 2.1.0 开始,它新增了组件级全局配置能力,并且率先支持了 Button 和 Tag。

也就是说,现在你可以在应用层统一设置按钮、标签的默认表现:

vue 复制代码
<wd-config-provider
  :button="{ size: 'large', type: 'primary', round: true }"
  :tag="{ size: 'large', round: true }"
>
  <wd-button>提交</wd-button>
  <wd-tag>标签</wd-tag>
</wd-config-provider>

这样做的好处很直接:如果你的项目里大部分按钮都需要统一尺寸、统一类型、统一圆角,就不用在每个组件上重复写一遍配置了。

配置优先级如下:

text 复制代码
组件 prop > 组件专属配置 > 组件内置默认值

也就是说,全局配置只是默认值。你仍然可以在单个组件上通过 prop 覆盖它。

这对中后台、业务小程序、统一设计规范的项目来说,会省掉不少重复代码。项目越大,这类默认配置的价值就越明显。

主题变量类型更加清晰

本次版本还优化了主题变量类型的生成方式。

之前 ConfigProviderThemeVars 的生成逻辑和 ConfigProvider 自身的类型定义混在一起,维护起来不够清晰。2.1.0 将主题变量类型独立拆分到 theme-vars.ts 中,避免生成脚本覆盖手写类型定义。

同时,我们也补充了全局 SCSS 变量和部分组件变量注释。

如果你使用 TypeScript 配置主题变量,现在类型提示会更完整:

ts 复制代码
import type { ConfigProviderThemeVars } from '@wot-ui/ui'

const themeVars: ConfigProviderThemeVars = {
  buttonPrimaryBg: '#07c160',
  buttonPrimaryColor: '#ffffff'
}

这类优化看起来不显眼,但对长期维护组件库和业务项目都很重要。类型提示越清楚,使用成本就越低。

修复了一批使用问题

除了全局配置能力,本次版本也修复了多个细节问题:

  • 修复 Toast 不支持自定义 icon 颜色的问题
  • 修复 useVideoPreview 没有被导出的问题
  • 修复 Cell 的 title、label 在纯数字和英文场景下不换行的问题
  • 修复部分组件 size 属性在特定模式下不生效的问题
  • 修复不传 type 时,size 样式被默认类型覆盖的问题
  • 修正 FAB 示例中的按钮类型
  • 为多个组件补齐模板中使用的子组件导入

这些问题大多来自真实使用场景。也感谢大家持续反馈,很多细节都是靠社区一起磨出来的。

文档同步更新

2.1.0 还补充了 form-item 的 value-align 文档说明,并更新了文档中的站点链接。

如果你在使用表单、主题配置或全局配置相关能力,可以顺手看一下最新文档。

如何升级到 2.1.0

如果你已经在项目中使用 Wot UI,可以将 package.json 中的 @wot-ui/ui 版本更新到 2.1.0:

json 复制代码
{
  "dependencies": {
    "@wot-ui/ui": "2.1.0"
  }
}

然后重新安装依赖:

bash 复制代码
pnpm install

如果你想直接通过命令更新依赖版本,也可以执行:

bash 复制代码
pnpm add @wot-ui/ui@2.1.0

使用 npm 的项目可以执行:

bash 复制代码
npm install @wot-ui/ui@2.1.0

对已有项目来说,重点不是"新安装组件库",而是把当前项目里的 @wot-ui/ui 依赖版本升级到 2.1.0。

最后

Wot UI 2.1.0 是一次偏工程体验的增强版本。

它主要带来了三点变化:

  • ConfigProvider 支持 Button、Tag 全局默认配置
  • 主题变量类型拆分维护,TypeScript 提示更完整
  • 修复 Toast、Cell、useVideoPreview 等多个实际使用问题

如果你的项目已经在使用 Wot UI v2,可以升级到 2.1.0 试试看。

也欢迎大家继续反馈使用场景和建议,一起把 Wot UI 打磨得更好用。

相关资源

相关推荐
程序员大阳1 分钟前
副队长CSS教程(38)–transform 变换
前端·css·变换·transform
程序员Sunday10 分钟前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
mldong21 分钟前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
架构技术专栏9 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海10 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝10 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财11 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起00711 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
用户114818678948412 小时前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界12 小时前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github