diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 1a13c38fe..1b913832b 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -10,6 +10,27 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). - Minor version：released every one to two months, including backwards compatible features. - Major version：including breaking changes and new features. +### [v2.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) + +`2020-11-08` + +**Feature** + +- Icon: using encoded woff2 iconfont by default [e0ad65](https://github.com/youzan/vant/commit/e0ad65e69fbcfb9ef69b25d2c1bce322577aad11) +- NavBar: add safe-area-inset-top prop [be25a4](https://github.com/youzan/vant/commit/be25a478dfbc599cdb27ba09d2d72858037c1700) +- Sticky: offset-top support vh unit [#7498](https://github.com/youzan/vant/issues/7498) + +**Bug Fixes** + +- NavBar: text vertical align [#7515](https://github.com/youzan/vant/issues/7515) +- NoticeBar: can't replay in iOS14 [#7516](https://github.com/youzan/vant/issues/7516) +- Picker: move to next option when default option is disabled [#7499](https://github.com/youzan/vant/issues/7499) +- Picker: should move to first option when all options are disabled [#7504](https://github.com/youzan/vant/issues/7504) +- Swipe: incorrect lazy render when loop is false [#7465](https://github.com/youzan/vant/issues/7465) +- Swipe: item should only rendered once [#7466](https://github.com/youzan/vant/issues/7466) +- Switch: remove unnecessary z-index [#7497](https://github.com/youzan/vant/issues/7497) +- Toast: onClose option should only be called once [#7496](https://github.com/youzan/vant/issues/7496) + ### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) `2020-10-31` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index fd073c78a..19c770028 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -10,6 +10,27 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。 +### [v2.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) + +`2020-11-08` + +**Feature** + +- Icon: 现在会默认使用 base64 图标，而不是有赞 CDN 上的 iconfont [e0ad65](https://github.com/youzan/vant/commit/e0ad65e69fbcfb9ef69b25d2c1bce322577aad11) +- NavBar: 新增 safe-area-inset-top 属性，用于开启 iOS 顶部安全区适配 [be25a4](https://github.com/youzan/vant/commit/be25a478dfbc599cdb27ba09d2d72858037c1700) +- Sticky: offset-top 属性支持使用 vh 单位 [#7498](https://github.com/youzan/vant/issues/7498) + +**Bug Fixes** + +- NavBar: 修复按钮文字不居中的问题 [#7515](https://github.com/youzan/vant/issues/7515) +- NoticeBar: 修复在 iOS14 上无法重复播放的问题 [#7516](https://github.com/youzan/vant/issues/7516) +- Picker: 修复级联模式下选项禁用时二级选项错误的问题 [#7499](https://github.com/youzan/vant/issues/7499) +- Picker: 修复禁用所有选项时默认展示的选项不为第一项的问题 [#7504](https://github.com/youzan/vant/issues/7504) +- Swipe: 修复开启 lazy-render 且 loop 为 false 时渲染节点不正确的问题 [#7465](https://github.com/youzan/vant/issues/7465) +- Swipe: 修复开启 lazy-render 时子节点被重复挂载的问题 [#7466](https://github.com/youzan/vant/issues/7466) +- Switch: 修复按钮 z-index 层级过高的问题 [#7497](https://github.com/youzan/vant/issues/7497) +- Toast: 修复 onClose 选项可以被重复触发的问题 [#7496](https://github.com/youzan/vant/issues/7496) + ### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) `2020-10-31` diff --git a/src/icon/README.md b/src/icon/README.md index fab273bb6..a321deb93 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -58,6 +58,8 @@ Icon uses font file in `yzcdn.cn` by default，if you want to use the local font import 'vant/lib/icon/local.css'; ``` +> Tips: Starting from version 2.10.13, Vant will use local font files in woff2 format by default + ### Add custom iconfont ```css diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index 980d46dcb..32e0eb538 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -60,6 +60,8 @@ Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载 import 'vant/lib/icon/local.css'; ``` +> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。 + ### 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。 diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index f4fb5d3e8..0b954b1a5 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -64,6 +64,7 @@ export default { | fixed | Whether to fixed top | _boolean_ | `false` | | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` | | z-index | Z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | Whether to enable top safe area adaptation | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 83f63d70b..47db28b89 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -65,7 +65,8 @@ export default { | border | 是否显示下边框 | _boolean_ | `true` | | fixed | 是否固定在顶部 | _boolean_ | `false` | | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| z-index | 元素 z-index | _number \| string_ | `1` | +| z-index | 导航栏 z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 4bd86e708..8f72ac913 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -1,25 +1,12 @@ @import '../style/var'; .van-nav-bar { - position: relative; z-index: @nav-bar-z-index; - display: flex; - align-items: center; - height: @nav-bar-height; - line-height: 1.5; + line-height: @line-height-lg; text-align: center; background-color: @nav-bar-background-color; user-select: none; - .van-icon { - color: @nav-bar-icon-color; - } - - &__arrow { - margin-right: @padding-base; - font-size: @nav-bar-arrow-size; - } - &--fixed { position: fixed; top: 0; @@ -27,6 +14,27 @@ width: 100%; } + &--safe-area-inset-top { + padding-top: constant(safe-area-inset-bottom); + padding-top: env(safe-area-inset-bottom); + } + + .van-icon { + color: @nav-bar-icon-color; + } + + &__content { + position: relative; + display: flex; + align-items: center; + height: @nav-bar-height; + } + + &__arrow { + margin-right: @padding-base; + font-size: @nav-bar-arrow-size; + } + &__title { max-width: 60%; margin: 0 auto; diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx index 1b625b814..d6995df1d 100644 --- a/src/nav-bar/index.tsx +++ b/src/nav-bar/index.tsx @@ -21,6 +21,7 @@ export default createComponent({ rightText: String, leftArrow: Boolean, placeholder: Boolean, + safeAreaInsetTop: Boolean, border: { type: Boolean, default: true, @@ -75,21 +76,26 @@ export default createComponent({
- {hasLeft && ( -
- {renderLeft()} +
+ {hasLeft && ( +
+ {renderLeft()} +
+ )} +
+ {slots.title ? slots.title() : title}
- )} -
- {slots.title ? slots.title() : title} + {hasRight && ( +
+ {renderRight()} +
+ )}
- {hasRight && ( -
- {renderRight()} -
- )}
); }; diff --git a/src/nav-bar/test/__snapshots__/demo.legacy.js.snap b/src/nav-bar/test/__snapshots__/demo.legacy.js.snap index bcd8a6ba2..363455438 100644 --- a/src/nav-bar/test/__snapshots__/demo.legacy.js.snap +++ b/src/nav-bar/test/__snapshots__/demo.legacy.js.snap @@ -4,19 +4,23 @@ exports[`renders demo correctly 1`] = `
-
- 返回
-
标题
-
按钮
+
+
+ 返回
+
标题
+
按钮
+
-
- 返回
-
标题
-
-
+
+
+ 返回
+
标题
+
+
+
diff --git a/src/nav-bar/test/__snapshots__/index.legacy.js.snap b/src/nav-bar/test/__snapshots__/index.legacy.js.snap index d4f4630a6..cd19791ed 100644 --- a/src/nav-bar/test/__snapshots__/index.legacy.js.snap +++ b/src/nav-bar/test/__snapshots__/index.legacy.js.snap @@ -1,23 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`placeholder prop 1`] = ` -
-
+exports[`should render left/right slot and match snapshot 1`] = ` +
+
+
Custom Left
+
Custom Right
`; -exports[`render left & right slot 1`] = ` -
-
Custom Left
-
-
Custom Right
+exports[`should render placeholder element when using placeholder prop 1`] = ` +
+
+
+
+
+
`; -exports[`render title slot 1`] = ` +exports[`should render title slot and match snapshot 1`] = `
-
Custom Title
+
+
Custom Title
+
`; diff --git a/src/nav-bar/test/index.legacy.js b/src/nav-bar/test/index.legacy.js index 63149c6e0..98f134ee9 100644 --- a/src/nav-bar/test/index.legacy.js +++ b/src/nav-bar/test/index.legacy.js @@ -1,7 +1,7 @@ import NavBar from '..'; import { mount, mockGetBoundingClientRect } from '../../../test'; -test('render left & right slot', () => { +test('should render left/right slot and match snapshot', () => { const wrapper = mount(NavBar, { scopedSlots: { left: () => 'Custom Left', @@ -12,7 +12,7 @@ test('render left & right slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('render title slot', () => { +test('should render title slot and match snapshot', () => { const wrapper = mount(NavBar, { scopedSlots: { title: () => 'Custom Title', @@ -22,7 +22,7 @@ test('render title slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('placeholder prop', () => { +test('should render placeholder element when using placeholder prop', () => { const restore = mockGetBoundingClientRect({ height: 50 }); const wrapper = mount(NavBar, { @@ -37,7 +37,7 @@ test('placeholder prop', () => { restore(); }); -test('click-left event', () => { +test('should emit click-left event when clicking left text', () => { const wrapper = mount(NavBar, { propsData: { leftText: 'left', @@ -48,7 +48,7 @@ test('click-left event', () => { expect(wrapper.emitted('click-left')).toBeTruthy(); }); -test('click-right event', () => { +test('should emit click-right event when clicking right text', () => { const wrapper = mount(NavBar, { propsData: { rightText: 'right', @@ -58,3 +58,13 @@ test('click-right event', () => { wrapper.find('.van-nav-bar__right').trigger('click'); expect(wrapper.emitted('click-right')).toBeTruthy(); }); + +test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => { + const wrapper = mount(NavBar, { + propsData: { + safeAreaInsetTop: true, + }, + }); + + expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy(); +}); diff --git a/src/notice-bar/index.js b/src/notice-bar/index.js index 8e82966ad..775bbf0d4 100644 --- a/src/notice-bar/index.js +++ b/src/notice-bar/index.js @@ -1,8 +1,8 @@ -import { ref, watch, reactive, nextTick, onActivated } from 'vue'; +import { ref, watch, reactive, onActivated } from 'vue'; import { isDef, createNamespace } from '../utils'; // Composition -import { useRect, doubleRaf, useEventListener } from '@vant/use'; +import { raf, useRect, doubleRaf, useEventListener } from '@vant/use'; // Components import Icon from '../icon'; @@ -94,7 +94,8 @@ export default createComponent({ state.duration = 0; // wait for Vue to render offset - nextTick(() => { + // using nextTick won't work in iOS14 + raf(() => { // use double raf to ensure animation can start doubleRaf(() => { state.offset = -contentWidth;