blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan 2020-11-08 17:02:26 +08:00
commit f85ebfb222
12 changed files with 137 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/markdown/changelog.en-US.md
View File

@ -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`

21
docs/markdown/changelog.zh-CN.md
View File

@ -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`

2
src/icon/README.md
View File

@ -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

2
src/icon/README.zh-CN.md
View File

@ -60,6 +60,8 @@ Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载
import 'vant/lib/icon/local.css';
```
> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。
### 自定义图标
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

1
src/nav-bar/README.md
View File

@ -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

3
src/nav-bar/README.zh-CN.md
View File

@ -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

36
src/nav-bar/index.less
View File

@ -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;

30
src/nav-bar/index.tsx
View File

@ -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({
<div
ref={navBarRef}
style={style}
class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
class={[
bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
{ [BORDER_BOTTOM]: border },
]}
>
{hasLeft && (
<div class={bem('left')} onClick={onClickLeft}>
{renderLeft()}
<div class={bem('content')}>
{hasLeft && (
<div class={bem('left')} onClick={onClickLeft}>
{renderLeft()}
</div>
)}
<div class={[bem('title'), 'van-ellipsis']}>
{slots.title ? slots.title() : title}
</div>
)}
<div class={[bem('title'), 'van-ellipsis']}>
{slots.title ? slots.title() : title}
{hasRight && (
<div class={bem('right')} onClick={onClickRight}>
{renderRight()}
</div>
)}
</div>
{hasRight && (
<div class={bem('right')} onClick={onClickRight}>
{renderRight()}
</div>
)}
</div>
);
};

22
src/nav-bar/test/__snapshots__/demo.legacy.js.snap
View File

@ -4,19 +4,23 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
<div class="van-nav-bar__content">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
</div>
</div>
</div>
<div>
<div class="van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
<!----></i></div>
<div class="van-nav-bar__content">
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
<!----></i><span class="van-nav-bar__text">返回</span></div>
<div class="van-nav-bar__title van-ellipsis">标题</div>
<div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
<!----></i></div>
</div>
</div>
</div>
</div>

26
src/nav-bar/test/__snapshots__/index.legacy.js.snap
View File

@ -1,23 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`placeholder prop 1`] = `
<div class="van-nav-bar__placeholder" style="height: 50px;">
<div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
exports[`should render left/right slot and match snapshot 1`] = `
<div class="van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__content">
<div class="van-nav-bar__left">Custom Left</div>
<div class="van-nav-bar__title van-ellipsis"></div>
<div class="van-nav-bar__right">Custom Right</div>
</div>
</div>
`;
exports[`render left & right slot 1`] = `
<div class="van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__left">Custom Left</div>
<div class="van-nav-bar__title van-ellipsis"></div>
<div class="van-nav-bar__right">Custom Right</div>
exports[`should render placeholder element when using placeholder prop 1`] = `
<div class="van-nav-bar__placeholder" style="height: 50px;">
<div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
<div class="van-nav-bar__content">
<div class="van-nav-bar__title van-ellipsis"></div>
</div>
</div>
</div>
`;
exports[`render title slot 1`] = `
exports[`should render title slot and match snapshot 1`] = `
<div class="van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__title van-ellipsis">Custom Title</div>
<div class="van-nav-bar__content">
<div class="van-nav-bar__title van-ellipsis">Custom Title</div>
</div>
</div>
`;

20
src/nav-bar/test/index.legacy.js
View File

@ -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();
});

7
src/notice-bar/index.js
View File

@ -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;