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/[email protected]/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/[email protected]使用 npm 的專案可以執行：
bash 代碼解讀複製代碼npm install @wot-ui/[email protected]對既有專案來說，重點不是重新安裝元件庫，而是把目前專案中的
@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 文件：wot-ui.cn/
- Wot UI 倉庫：github.com/wot-ui/wot-…
- 版本比較：github.com/wot-ui/wot-…
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
