Frontend · Uni-app · WeChat Mini Program

Wot UI 2.2.0 Lands a Subtle Button Variant and Full-Screen Video Previews

By 不如摸鱼去 · Jul 1, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Conditional form fields that silently block submission have been a recurring source of support tickets and workaround code in uni-app projects; this fix removes that entire category of bug. The `subtle` button variant and full-screen video support close two feature gaps that previously forced developers into custom CSS or fragile native-video workarounds.

Summary

The `Button` component gains a `subtle` variant for interfaces that need a visual weight lighter than `soft` but more structured than a plain outline — useful in cards, lists, and any layout where button hierarchy needs finer control. `VideoPreview` and its composable `useVideoPreview` now accept a `fullScreen` flag, with internal handling on the App side to avoid the occlusion bugs that native same-layer video rendering often causes.

A long-standing pain point in dynamic forms gets resolved: form items removed from the DOM with `v-if` no longer participate in validation. They rejoin the validation set only when rendered again, which eliminates the need for extra guard logic on conditional fields.

The release also patches a `Toast` icon line-height glitch when custom sizes are set, fixes `Tabs` child-component rendering order on Alipay Mini Programs, and corrects auto-import examples in the docs.

Takeaways

— `Button` now accepts `variant="subtle"`, producing a visual weight between `soft` and a plain outline.

— `VideoPreview` and `useVideoPreview` support a `fullScreen` prop that triggers immersive playback, with internal logic to dodge native same-layer rendering occlusion on App.

— Form items removed via `v-if` are excluded from `validate()` results; they re-enter validation only when rendered again.

— `Toast` icon line-height no longer breaks when a custom icon size is applied.

— `Tabs` child components now render in the correct order on Alipay Mini Programs.

— Documentation auto-import examples have been corrected, and new sections cover the `subtle` variant, full-screen video config, and hidden-field validation behavior.

Conclusions

Adding a `subtle` variant may seem cosmetic, but it signals that the component library is maturing past basic coverage into the nuance of real UI design systems — the kind of distinction that otherwise lives in scattered custom overrides.

Full-screen video in a cross-platform uni-app component is deceptively hard because of native-layer rendering conflicts; the fact that this ships with App-side occlusion handling baked in means the maintainer absorbed the platform pain so consumers don't have to.

The hidden-field validation fix is the kind of change that doesn't make a changelog exciting but eliminates an entire class of conditional-rendering bugs that dynamic-form builders have been working around for years.

Patching Alipay Mini Program `Tabs` rendering order and `Toast` line-height together in one release reflects the reality of maintaining a cross-platform UI kit: platform-specific quirks accumulate and need regular triage, not just feature work.

Concepts & terms

subtle button variant

A button style that is visually lighter than a filled or soft button but retains a visible boundary, sitting between `soft` and a plain outline. It's used to de-emphasize an action without reducing it to a text-only link.

same-layer rendering

A technique in hybrid app frameworks where native video components are composited directly into the WebView layer rather than floating above it. When mishandled, it causes occlusion bugs — UI elements that should appear on top of the video get hidden behind it.

v-if form validation exclusion

A behavior where form items conditionally removed from the DOM with Vue's `v-if` directive are automatically excluded from the form's validation result, and re-included only when they are rendered again.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗