Wot UI 2.2.0 发布：Button 新增 subtle，VideoPreview 预览体验继续增强

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

Wot UI 2.2.0 正式发布啦。

这次更新依然不是那种"把整个组件库翻一遍"的大版本，但很适合日常项目直接升级体验。它主要补了两类内容：一类是组件能力继续往前走，比如 Button 新增了 subtle 变体、VideoPreview 支持全屏预览；另一类是一些真实场景里会踩到的细节问题，比如隐藏表单项校验、支付宝小程序 Tabs 渲染顺序、Toast 图标行高异常等。

如果你已经在用 Wot UI v2，这个版本值得跟上。

Button 新增 subtle 类型变体

先说一个很直观的更新：Button 现在新增了 subtle 变体。

之前按钮已经支持 base、plain、dashed、soft、text 等几种表现形式，但在一些场景里，大家想要的其实是一种"比 soft 更克制一点、又比纯描边更柔和一点"的视觉效果。

2.2.0 把这个空位补上了。

现在你可以直接这样写：

vue 复制代码

<wd-button variant="subtle">主要按钮</wd-button>

这个变体比较适合这些场景：

页面里需要弱化操作层级，但又不想完全退成文字按钮
列表页、卡片页里需要保留按钮轮廓感
一组按钮里，希望主次关系更自然一些

如果你之前是靠自定义样式去拼这种效果，那现在可以直接用官方变体了，组件语义也会更统一。

VideoPreview 支持全屏预览

这次我自己比较关注的另一个更新，是 VideoPreview 的预览体验增强。

从 2.2.0 开始，wd-video-preview 和 useVideoPreview 都支持全屏预览能力了。对于竖屏视频、展示型视频内容，或者你就是希望用户点开以后直接沉浸式查看，这个能力会顺手很多。

比如函数式调用时可以直接传入 fullScreen：

ts 复制代码

import { useVideoPreview } from '@/uni_modules/wot-ui'

const { previewVideo } = useVideoPreview()

function openPreview() {
  previewVideo({
    url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
    title: '全屏视频',
    fullScreen: true,
    closePosition: 'right-top'
  })
}

如果你更习惯组件式写法，也可以直接在组件上声明：

vue 复制代码

<wd-video-preview full-screen />

这次更新不只是"多了一个参数"这么简单。针对 App 端的原生 video 全屏播放场景，内部也补了一层处理逻辑，尽量规避原生视频同层渲染带来的遮挡问题。对使用者来说，最直接的感受就是：视频预览终于更像"视频预览"了，而不只是一个普通弹层里塞了个 video。

Form 隐藏字段不再误触发校验

这次还有一个很实用的修复，来自表单场景。

之前如果某个 wd-form-item 是通过 v-if 控制显示隐藏，即使它已经没渲染出来，只要校验 schema 里还保留着这个字段，它依然可能影响 validate() 的结果。

这在动态表单里会比较难受。明明用户看不到那个字段，也没法填写，但提交时却可能被它卡住。

2.2.0 修复了这个问题。

现在的行为会更符合直觉：

text 复制代码

通过 v-if 卸载的表单项，不再参与当前校验结果
重新显示后，再重新参与校验

也就是说，动态增减表单项的体验会更稳定，业务上也更容易控制。尤其是那种"根据开关、身份、配置项决定是否显示字段"的页面，这个修复会省掉不少额外判断。

其他问题也一起修了

除了上面几个比较明显的变化，2.2.0 还顺手修了一批使用体验问题：

修复 Toast 图标设置图标大小后行高异常的问题
修复支付宝小程序 Tabs 子组件渲染顺序错误的问题
修复文档中自动导入示例代码的问题

这些更新单看都不算"大新闻"，但都属于真实项目里会碰到、碰到了就挺烦的问题。一个个补掉之后，整体体验会顺很多。

文档也同步补齐了

配合这次版本，文档侧也补上了几块内容：

Button 文档新增 subtle 变体说明
VideoPreview / useVideoPreview 文档补充了全屏预览、关闭按钮位置等配置
Form 文档新增隐藏字段校验说明和示例

如果你刚好在做动态表单、视频预览或者页面交互风格统一，建议顺手看一下最新文档。

如何升级到 2.2.0

如果你已经在项目中使用 Wot UI，可以把 package.json 中的 @wot-ui/ui 版本更新到 2.2.0：

json 复制代码

{
  "dependencies": {
    "@wot-ui/ui": "2.2.0"
  }
}

然后重新安装依赖：

bash 复制代码

pnpm install

如果你希望直接更新，也可以执行：

bash 复制代码

pnpm add @wot-ui/ui@2.2.0

使用 npm 的项目可以执行：

bash 复制代码

npm install @wot-ui/ui@2.2.0

对已有项目来说，重点不是重新安装组件库，而是把当前项目中的 @wot-ui/ui 版本升级到 2.2.0。

最后

Wot UI 2.2.0 是一次很典型的"看起来不夸张，但升级以后会觉得更顺手"的版本。

它主要带来了几件事：

Button 新增 subtle 变体，按钮层级表达更丰富
VideoPreview 支持全屏预览，视频展示体验更完整
Form 修复隐藏字段仍参与校验的问题，动态表单更符合直觉
同步修复 Toast、支付宝小程序 Tabs 和文档示例中的一些细节问题

如果你的项目已经在使用 Wot UI v2，可以直接升级到 2.2.0 试试看。

也欢迎大家继续反馈真实使用场景和问题，我们会继续把这些"小而关键"的体验一点点补齐。

Wot UI 2.2.0 发布：Button 新增 subtle，VideoPreview 预览体验继续增强

Button 新增 subtle 类型变体

VideoPreview 支持全屏预览

Form 隐藏字段不再误触发校验

其他问题也一起修了

文档也同步补齐了

如何升级到 2.2.0

最后

相关资源