Vant4 更新日志

提示

當(dāng)前文檔為 Vant 4 的更新日志，其他版本請參考：

• Vant 2 更新日志
• Vant 3 更新日志

介紹

Vant 遵循 Semver 語義化版本規(guī)范。

發(fā)布節(jié)奏

• 修訂號：每周發(fā)布，包含新特性和問題修復(fù)。
• 次版本號：每隔一至二個月發(fā)布，包含新特性和較大的功能更新，向下兼容。
• 主版本號：無固定的發(fā)布時間，包含不兼容更新和重大功能更新。

更新內(nèi)容

v4.0.2

?2022-12-03?

Bug Fixes

• Field: 修復(fù)使用 formatter 時光標(biāo)位置錯誤的問題 #11348
• Image: 修復(fù)在 Nuxt 3 下圖片可能無法展示的問題 128972
• NavBar: 修復(fù)屏幕旋轉(zhuǎn)時 placeholder 未自動適配高度的問題 #11351

v4.0.1

?2022-12-01?

Feature

• Picker: 新增 selectedIndexes 作為事件入?yún)?nbsp;#11329

Bug Fixes

• Field: 修復(fù)未選中時修改綁定的值會導(dǎo)致鍵盤彈出的問題 #11333

v4.0.0

?2022-11-26?

完整內(nèi)容請移步：「4.0 更新介紹」

Feature

• List: 新增 disabled 屬性 #11307
• BackTop: 支持動態(tài)設(shè)置 target 屬性 #11311
• BackTop: 支持通過 CSS 變量修改組件位置 #11312
• BackTop: 重命名 visibility-height 屬性為 offset #11309

Bug Fixes

• Field: 修復(fù)格式化值后，光標(biāo)位置錯誤的問題 #11308

v4.0.0-rc.9

?2022-11-24?

Bug Fixes

• Cell: 修復(fù) arrow-direction 設(shè)置為 right 不顯示的問題 #11279
• Style: 修復(fù) body 標(biāo)簽上的 normalize 樣式未生效的問題 #11287

v4.0.0-rc.8

?2022-11-20?

Feature

• 新增 BackTop 回到頂部組件，注意該新組件的 API 尚未穩(wěn)定，在 4.0 正式版發(fā)布前仍可能產(chǎn)生 breaking change #11236

Bug Fixes

• DropdownItem: 修復(fù)使用 teleport 時無法設(shè)置 attr 的問題 #11273
• List: 修復(fù)初始的 loading 值為 true 時加載錯誤的問題 #11275
• NumberKeyboard: 修復(fù)使用 teleport 時無法設(shè)置 attr 的問題 #11274

v4.0.0-rc.7

?2022-11-13?

New Component

• 新增 SkeletonAvatar、SkeletonTitle、SkeletonImage、SkeletonParagraph 組件 #11173

Feature

• ImagePreview: 新增 long-press 事件 #11252
• Popover: 支持非受控模式 #11244

Bug Fixes

• ActionSheet: 修復(fù)標(biāo)題為空時取消按鈕層級錯誤的問題 #11213
• DatePicker: 在生產(chǎn)環(huán)境下不再拋出開發(fā)錯誤提示 #11248
• Lazyload: 修復(fù)使用 lazy-image 時報錯 h is not a function 的問題 #11229
• Picker: 修復(fù)拋出 confirm 事件時 v-model 未正確更新的問題 #11194
• Picker: 修復(fù) column 為空時操作報錯的問題 #11249
• Uploader: 修復(fù) show-upload 為 false 時 chooseFile 無法調(diào)用的問題 #11218

v4.0.0-rc.6

?2022-10-23?

Feature

• Calendar: subtitle 插槽新增 text 和 date 入?yún)?nbsp;#11168
• Cell: 新增 tag 屬性 #11139
• ImagePreview: 新增 image 插槽 #11133
• Toast: 新增 wordBreak 選項(xiàng) #11147

Bug Fixes

• CouponList: 修復(fù) coupon 位置錯誤的問題 #11153
• CouponList: 修復(fù)輸入框樣式錯誤的問題 #11155
• Swipe: 修復(fù)在 Popup 內(nèi)時個別情況下渲染錯誤的問題 #11162

v4.0.0-rc.5

?2022-10-07?

Feature

• Field: 支持將 label-position 設(shè)置為 top #11102
• Loading: 新增 icon 插槽 #11109
• NavBar: 新增 clickable 屬性 #11048
• Stepper: 新增 auto-fixed 屬性 #11071

Bug Fixes

• DatePicker: 修復(fù)日期超出 maxDate 時格式化不正確的問題 #11122
• Tabs: 修復(fù)開啟 scrollspy 時個別情況下標(biāo)題欄滾動位置錯誤的問題 #11116
• Tabs: 修復(fù)開啟 scrollspy 時 nav-bottom 插槽遮擋內(nèi)容的問題 #11115

v4.0.0-rc.4

?2022-09-25?

Feature

• Field: end-validate 事件新增 message 參數(shù) #11080

Bug Fixes

• Tabs: 修復(fù)個別情況下頁面滾動位置錯誤的問題 #11085
• Tabs: 修復(fù)初始化時菜單橫向滾動位置錯誤的問題 #11059

v4.0.0-rc.3

?2022-09-12?

Feature

• ConfigProvider: 新增 ConfigProviderThemeVars 類型 #11034
• Notify: 新增 z-index 屬性 #11032
• 移除 ?@popperjs/core? 依賴，減少安裝體積 1.6MB #11030

Types

• Toast: 修復(fù)缺少全局類型定義的問題 #11033

v4.0.0-rc.2

?2022-09-11?

Breaking Changes

• 調(diào)整了所有 CSS 變量的掛載位置，由 ?body? 節(jié)點(diǎn)調(diào)整回 ?:root? 節(jié)點(diǎn)，調(diào)整后與 Vant v3 版本保持一致，以便于 v3 項(xiàng)目更平滑地升級到 v4 版本。 #11026

Bug Fixes

• Dialog: 修復(fù)過渡動畫異常的問題 #11028
• Empty: 修復(fù)深色模式下亮度過高的問題 #11027

v4.0.0-rc.1

?2022-09-10?

Feature

• 導(dǎo)出所有組件的 props，方便進(jìn)行二次封裝 #11024
• Dialog: message-align 屬性支持設(shè)置為 justify #11014
• Image: 新增 block 屬性 #11022
• Toast: 新增 message 插槽 #11018

Bug Fixes

• Picker: 修復(fù)部分情況下未正確更新選中值的問題 #11009
• Locale: 修復(fù)讀取 i18n 文案時可能獲取到 JS 原生方法的問題 #11010

v4.0.0-rc.0

?2022-09-04?

Feature

• 新增 PickerGroup 選擇器組 組件

Bug Fixes

• DatePicker: 修復(fù)未正確更新 modelValue 的問題 #10984
• DatePicker: 修復(fù) min-date 屬性未正確生效的問題 #10985

v4.0.0-beta.1

?2022-08-24?

Breaking Changes

• Popup: 默認(rèn)添加了 ?box-sizing: border-box? 樣式。
• Popup: 調(diào)整了 ?position="center"? 時的水平居中方式，以解決彈窗寬度無法正確自適應(yīng)的問題。

// Vant 3
.van-popup--center {
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

// Vant 4
.van-popup--center {
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100vw - var(--van-padding-md) * 2);
  margin: 0 auto;
  transform: translateY(-50%);
}

New Component

• 新增 Space 間距 組件, 由 @LadyChatterleyLover 貢獻(xiàn) #10857

Feature

• ConfigProvider: 新增 z-index 屬性，用于設(shè)置彈窗組件的 z-index #10915
• Form: 新增 rule 的 validateEmpty 選項(xiàng) #10913
• Popup: 新增 role 和 tabindex，優(yōu)化無障礙訪問 #10894
• TouchEmulator: 支持 .mjs 后綴 #10888

Feature

• ConfigProvider: 新增 theme-vars-dark 和 theme-vars-light 屬性 #10939
• Picker: 新增 clickOption 事件 #10865
• 為 scroll 事件添加了正確的 passive 標(biāo)記來提升滾動性能 #10951
• @vant/use: 優(yōu)化 useEventListener 類型定義 #10952

Bug Fixes

• ConfigProvider: 修復(fù)銷毀時沒有回收全局樣式類的問題 #10898
• 修復(fù) touchstart 導(dǎo)致控制臺出現(xiàn) passive event warning 的問題 #10954
• Tabs: 修復(fù)開啟 swipeable 時，resize 方法無法正確生效的問題 #10964
• 修復(fù)在 WebStorm 下標(biāo)簽無法自動補(bǔ)全的問題 #10946
• Badge: 修復(fù)使用 show-zero 時字符串 '0' 不生效的問題 #10921
• Calendar: 修復(fù)關(guān)閉彈窗過程中內(nèi)容白屏的問題 #10910
• Calendar: 修復(fù)控制臺出現(xiàn)讀取 getFullYear 異常的問題 #10909
• Empty: 修復(fù)在 Tab 下嵌套使用時渲染異常的問題 #10943
• Popover: 修復(fù)在 Popup 下嵌套使用時無法滾動的問題 #10949
• PullRefresh: 修復(fù) Chrome 控制臺出現(xiàn) passive event warning 的問題 #10938
• Search: 修復(fù) --van-search-input-height 樣式變量不生效的問題 #10911

v4.0.0-beta.0

?2022-07-16?

Breaking Changes

• Toast: 重新設(shè)計函數(shù)調(diào)用 API #10804
• Dialog: 重新設(shè)計函數(shù)調(diào)用 API #10781
• Notify: 重新設(shè)計函數(shù)調(diào)用 API#10782
• ImagePreview: 重新設(shè)計函數(shù)調(diào)用 API #10802

關(guān)于以上改動的詳細(xì)描述和遷移方法，請參考 從 v3 升級到 v4 的 「API 調(diào)整」部分。

Feature

• 新增 @vant/compat 包，用于輔助代碼遷移 #10806
• Calendar: 新增 getSelectedDate 方法 419a8e
• 由于主題定制方式調(diào)整，發(fā)布到 npm 的代碼中將不再包含 .less 樣式源文件，從而減少 npm 包體積 #10752

Bug Fixes

• Uploader: 修復(fù)預(yù)覽圖片時會展示上傳失敗的圖片的問題 #10790

v4.0.0-alpha.4

?2022-05-31?

Feature

• 適配 nuxt 3，現(xiàn)在 dist 目錄下所有 esmodule 文件將使用 ?.mjs? 文件后綴 #10625

v4.0.0-alpha.3

?2022-05-02?

Feature

• Form: 支持同時設(shè)置多個 validate-trigger 值 #10544
• Empty: 支持在無網(wǎng)絡(luò)的環(huán)境下離線使用，圖片從 CDN 調(diào)整為內(nèi)聯(lián)的 SVG 圖片 #10514 #10515 #10516
• Loading: 優(yōu)化無障礙訪問 #10568

Bug Fixes

• Search: 修復(fù)暗色模式下樣式錯誤的問題 #10527
• @vant/area-data: 修復(fù)發(fā)布到 npm 時包含 tsconfig.json 文件導(dǎo)致編譯錯誤的問題 f927f6

v4.0.0-alpha.2

?2022-04-16?

Feature

• CalendarDay: 增加日期行間距 #10441
• Empty: 支持單獨(dú)設(shè)置 image 的寬高 #10465
• Field: 新增 enterkeyhint 屬性 #10478
• Form: 新增 getValues 方法 #10511
• Icon: 新增 qq、weibo 等圖標(biāo) #10468
• Locale: 新增 Danish 丹麥語 #10513
• ShareSheet: 不再依賴 CDN 上的圖片資源，使用 iconfont 代替 #10469
• web-types.json 文件增加 event arguments 信息 #10474

Bug Fixes

• DatetimePicker: 修復(fù) modeValue 與選中的數(shù)據(jù)不一致的問題 #10448
• Rate: 修復(fù)多行時滑動選中不正確的問題 #10500

v4.0.0-alpha.1

?2022-03-19?

Feature

• @vant/area-data: 新增南京市江北新區(qū) #10410
• Locale: 新增老撾語 #10388

Bug Fixes

• Calendar: 修復(fù)暗色模式下標(biāo)題顏色 #10403
• Picker: 修復(fù)暗色模式下標(biāo)題顏色 #10403
• ConfigProvider: 修復(fù)默認(rèn)設(shè)置暗色模式不生效的問題 #10413
• DatePicker: 修復(fù)更新 v-model 不生效的問題 #10415
• Dialog: 修復(fù)暗色模式下標(biāo)題和文本顏色 #10379
• IndexBar: 修復(fù)底部索引無法高亮的問題 #10404

4.0.0-alpha.0

?2022-02-21?

不兼容更新

參見 從 v3 升級到 v4。

Feature

• ConfigProvider: 新增 ?theme? 屬性，用于開啟深色模式
• ConfigProvider: 新增 ?ConfigProviderTheme? 類型

Style

在之前的版本中，Vant 組件有兩種色彩風(fēng)格，一部分采用紅色作為主色調(diào)，另一部分采用藍(lán)色。為了保持色彩規(guī)范的統(tǒng)一，我們在 Vant 4 中對組件的主色調(diào)進(jìn)行了統(tǒng)一，所有組件均采用藍(lán)色作為主色調(diào)。

以下組件的默認(rèn)色值風(fēng)格由紅色調(diào)整為藍(lán)色：

• AddressEdit
• AddressList
• Card
• Calendar
• Cascader
• ContactList
• ContactEdit
• CouponList
• Dialog
• DropdownMenu
• IndexBar
• Sidebar
• Steps
• Tabs
• TreeSelect

其他：

• ?--van-font-bold? 的默認(rèn)值由 ?500? 調(diào)整為 ?600?
• ActionBar: 調(diào)整 ?--van-action-bar-icon-text-color? 變量的默認(rèn)值為 ?--van-text-color?
• AddressList: 重命名 ?--van-address-list-item-radio-icon-color? 為 ?--van-address-list-radio-color?
• Button: 默認(rèn)圓角大小從 ?2px? 調(diào)整為 ?4px?
• Button: 默認(rèn)按鈕的邊框顏色調(diào)整為 ?--van-gray-4?
• Button: 調(diào)整 ?font-smoothing?，默認(rèn)使用粗體文字
• Cell: 只設(shè)置 ?value? 時，內(nèi)容不再會靠左對齊
• Card: 調(diào)整 ?--van-card-background? 變量的默認(rèn)值為 ?--van-background?
• Card: 調(diào)整 ?--van-card-price-color? 變量的默認(rèn)值為 ?--van-text-color?
• Card: 調(diào)整 ?--van-card-desc-color? 變量的默認(rèn)值為 ?--van-text-color-2?
• ContactList: 重命名 ?--van-contact-list-item-radio-icon-color? 為 ?--van-contact-list-radio-color?
• CouponList: 重命名 ?--van-coupon-corner-checkbox-icon-color? 為 ?--van-coupon-checkbox-color?
• Field: 調(diào)整 ?--van-field-label-color? 變量的默認(rèn)值為 ?--van-text-color?
• Switch: 移除 ?--van-switch-border? 變量
• Switch: 調(diào)整 ?--van-switch-size? 變量的默認(rèn)值為 ?26px?
• Switch: 調(diào)整 ?--van-switch-background? 變量的默認(rèn)值為 ?rgba(120, 120, 128, 0.16)?
• Tabbar: 調(diào)整 ?--van-tabbar-item-text-color? 變量的默認(rèn)值為 ?--van-text-color?
• GridItem: 調(diào)整 ?--van-grid-item-text-color? 變量的默認(rèn)值為 ?--van-text-color?