diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md index 40f481da6..7fd4f2d02 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -293,10 +293,6 @@ emit('clickInput'); 在 Vant 4.0 版本中,以下 API 进行了不兼容更新: -#### Tabs - -- 移除了 `click` 和 `disabled` 事件,请使用 `click-tab` 事件代替 - #### AddressEdit - 移除 `show-postal` 属性 @@ -304,6 +300,35 @@ emit('clickInput'); - `change-area` 事件的参数调整为 `PickerOption[]` 类型 - 移除未在文档中标注的 `getArea` 实例方法 +#### Popup + +Popup 的 CSS 样式进行了一定调整,请确认是否对项目中的 UI 产生影响。 + +- 默认添加了 `box-sizing: border-box` 样式 +- 调整了 `position="center"` 时的水平居中方式,以解决弹窗宽度无法正确自适应的问题: + +```less +// 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%); +} +``` + +#### Tabs + +- 移除了 `click` 和 `disabled` 事件,请使用 `click-tab` 事件代替 + ## 样式变量调整 ### 移除 Less 变量 diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less index c67c950a5..c02ac785c 100644 --- a/packages/vant/src/dialog/index.less +++ b/packages/vant/src/dialog/index.less @@ -22,7 +22,6 @@ body { .van-dialog { top: 45%; - left: 50%; width: var(--van-dialog-width); overflow: hidden; font-size: var(--van-dialog-font-size); diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less index cc2a74658..fe966e310 100644 --- a/packages/vant/src/image-preview/index.less +++ b/packages/vant/src/image-preview/index.less @@ -16,6 +16,7 @@ body { left: 0; width: 100%; height: 100%; + max-width: none; background-color: transparent; transform: none; diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less index fc9db3f20..492c9cb30 100644 --- a/packages/vant/src/popup/index.less +++ b/packages/vant/src/popup/index.less @@ -17,6 +17,7 @@ body { position: fixed; max-height: 100%; overflow-y: auto; + box-sizing: border-box; background: var(--van-popup-background); transition: var(--van-popup-transition); -webkit-overflow-scrolling: touch; @@ -25,6 +26,8 @@ body { top: 50%; left: 0; right: 0; + width: fit-content; + max-width: calc(100vw - var(--van-padding-md) * 2); margin: 0 auto; transform: translateY(-50%);