From 9be853f7ace6d17445f71efafc99d3f08202d097 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 29 Oct 2020 22:04:13 +0800 Subject: [PATCH 01/13] Revert "fix(Tabs): should scroll to current content when mounted (#7411)" This reverts commit f504245074fb0450ec69f5c64577be2716b80ac4. --- src/tabs/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/tabs/index.js b/src/tabs/index.js index 496790e62..4431d447e 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -189,7 +189,6 @@ export default createComponent({ this.inited = true; this.tabHeight = getVisibleHeight(this.$refs.wrap); this.scrollIntoView(true); - this.scrollToCurrentContent(true); }); }, From 2924004dd3f8976bbe7d387e7d0a38ee56b13a1e Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 29 Oct 2020 22:46:03 +0800 Subject: [PATCH 02/13] feat(Progress): add resize method #5161 --- src/progress/README.md | 8 ++++++++ src/progress/README.zh-CN.md | 35 +++++++++++++++++++++++++++++++++++ src/progress/index.js | 9 +++++---- types/index.d.ts | 3 ++- types/progress.d.ts | 5 +++++ 5 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 types/progress.d.ts diff --git a/src/progress/README.md b/src/progress/README.md index b7bd30132..76e84f983 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -61,3 +61,11 @@ Use `pivot-text` to custom text，use `color` to custom bar color. | text-color | Pivot text color | _string_ | `white` | | inactive | Whether to be gray | _boolean_ | `false` | | show-pivot | Whether to show text | _boolean_ | `true` | + +### Methods + +Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call instance methods. + +| Name | Description | Attribute | Return value | +| --- | --- | --- | --- | +| resize | Resize Progress when container element resized or visibility changed | - | - | diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index d8db3325c..3517867ae 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -69,3 +69,38 @@ Vue.use(Progress); | text-color | 进度文字颜色 | _string_ | `white` | | inactive | 是否置灰 | _boolean_ | `false` | | show-pivot | 是否显示进度文字 | _boolean_ | `true` | + +### 方法 + +通过 ref 可以获取到 Progress 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 + +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | -------------------------------------------- | ---- | ------ | +| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | - | + +## 常见问题 + +### 组件从隐藏状态切换到显示状态时，渲染不正确？ + +Progress 组件在挂载时，会获取自身的宽度，并计算出进度条的样式。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示正确的进度。 + +#### 解决方法 + +方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题： + +```html + + + + +``` + +方法二，调用组件的 resize 方法来主动触发重绘： + +```html + +``` + +```js +this.$refs.progress.resize(); +``` diff --git a/src/progress/index.js b/src/progress/index.js index 9d90b94ba..1aef1dc4b 100644 --- a/src/progress/index.js +++ b/src/progress/index.js @@ -30,16 +30,17 @@ export default createComponent({ }, mounted() { - this.setWidth(); + this.resize(); }, watch: { - showPivot: 'setWidth', - pivotText: 'setWidth', + showPivot: 'resize', + pivotText: 'resize', }, methods: { - setWidth() { + // @exposed-api + resize() { this.$nextTick(() => { this.progressWidth = this.$el.offsetWidth; this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0; diff --git a/types/index.d.ts b/types/index.d.ts index 38a46936a..3e6a93bd3 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -19,6 +19,7 @@ import { List } from './list'; import { Locale } from './locale'; import { Notify } from './notify'; import { Picker } from './picker'; +import { Progress } from './progress'; import { Sku } from './sku'; import { Swipe } from './swipe'; import { SwipeCell } from './swipe-cell'; @@ -65,7 +66,6 @@ export class Pagination extends VanComponent {} export class Panel extends VanComponent {} export class PasswordInput extends VanComponent {} export class Popup extends VanComponent {} -export class Progress extends VanComponent {} export class PullRefresh extends VanComponent {} export class Radio extends VanComponent {} export class RadioGroup extends VanComponent {} @@ -110,6 +110,7 @@ export { Locale, Notify, Picker, + Progress, Sku, Swipe, SwipeCell, diff --git a/types/progress.d.ts b/types/progress.d.ts new file mode 100644 index 000000000..e54f734f9 --- /dev/null +++ b/types/progress.d.ts @@ -0,0 +1,5 @@ +import { VanComponent } from './component'; + +export class Progress extends VanComponent { + resize(): void; +} From 01f3040ac7d90b333cbfbbfcb0af22f1c291cde1 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 29 Oct 2020 22:46:27 +0800 Subject: [PATCH 03/13] docs: adjust resize method description --- src/image-preview/README.md | 2 +- src/image-preview/README.zh-CN.md | 2 +- src/swipe/README.md | 4 ++-- src/swipe/README.zh-CN.md | 6 +++--- src/tab/README.md | 4 ++-- src/tab/README.zh-CN.md | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 3fb4392cb..f8e5e62c0 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -159,7 +159,7 @@ export default { | closed `v2.5.6` | Triggered after closed | - | | change | Triggered when current image change | index: index of current image | | scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} | -| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | void | +| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | - | ### Slots diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index f5985e2ce..d9035a953 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -199,7 +199,7 @@ export default { | closed `v2.5.6` | 关闭且且动画结束后触发 | - | | change | 切换当前图片时触发 | index: 当前图片的索引 | | scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } | -| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | void | +| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | - | ### Slots diff --git a/src/swipe/README.md b/src/swipe/README.md index c1a3daef5..91cfae89e 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -193,8 +193,8 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance | --- | --- | --- | --- | | prev `v2.4.2` | Swipe to prev item | - | - | | next `v2.4.2` | Swipe to next item | - | - | -| swipeTo | Swipe to target index | index: target index, options: Options | void | -| resize | Resize Swipe when container element resized | - | void | +| swipeTo | Swipe to target index | index: target index, options: Options | - | +| resize | Resize Swipe when container element resized or visibility changed | - | - | ### swipeTo Options diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index e4853ece0..ad78882ca 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -197,14 +197,14 @@ export default { ### Swipe 方法 -通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。。 +通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | | prev `v2.4.2` | 切换到上一轮播 | - | - | | next `v2.4.2` | 切换到下一轮播 | - | - | -| swipeTo | 切换到指定位置 | index: number, options: Options | void | -| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void | +| swipeTo | 切换到指定位置 | index: number, options: Options | - | +| resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - | ### swipeTo Options 格式 diff --git a/src/tab/README.md b/src/tab/README.md index a0bf32707..39ac034de 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -269,8 +269,8 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance | Name | Description | Attribute | Return value | | --- | --- | --- | --- | -| resize | Resize Tabs when container element resized | - | void | -| scrollTo `v2.9.3` | Go to specified tab in scrollspy mode | name | void | +| resize | Resize Tabs when container element resized or visibility changed | - | - | +| scrollTo `v2.9.3` | Go to specified tab in scrollspy mode | name | - | ### Tabs Slots diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 89fc7ae53..650f99801 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -277,8 +277,8 @@ export default { | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | -| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void | -| scrollTo `v2.9.3` | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | void | +| resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - | +| scrollTo `v2.9.3` | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | - | ### Tabs Slots From 3efccbb31427cd2636c44bd59ba039a045124da7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Fri, 30 Oct 2020 22:15:23 +0800 Subject: [PATCH 04/13] test: use pull_request_target (#7453) --- .github/workflows/preview.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index e7882c8e5..4bea6ea5f 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -1,6 +1,6 @@ name: 🔂 Surge PR Preview -on: [push, pull_request] +on: [push, pull_request_target] jobs: preview: From ff7742670ba09f5f89c3bdaddbf1843476aeee58 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 30 Oct 2020 22:21:21 +0800 Subject: [PATCH 05/13] docs(Tabs): add resize faq --- src/tab/README.zh-CN.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 650f99801..2c228653c 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -293,3 +293,30 @@ export default { | ------- | ---------- | | default | 标签页内容 | | title | 自定义标题 | + +## 常见问题 + +### 组件从隐藏状态切换到显示状态时，底部条位置错误？ + +Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。 + +#### 解决方法 + +方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题： + +```html + + + + +``` + +方法二，调用组件的 resize 方法来主动触发重绘： + +```html + +``` + +```js +this.$refs.tabs.resize(); +``` From f4402f9a9175a5df714907ba85fdc1b72c46bc62 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 07:52:27 +0800 Subject: [PATCH 06/13] style(Sidebar): fix long number wrap (#7456) --- src/sidebar-item/index.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less index 49b6cd2d9..7f17160f7 100644 --- a/src/sidebar-item/index.less +++ b/src/sidebar-item/index.less @@ -9,7 +9,6 @@ color: @sidebar-text-color; font-size: @sidebar-font-size; line-height: @sidebar-line-height; - word-wrap: break-word; background-color: @sidebar-background-color; cursor: pointer; user-select: none; @@ -21,6 +20,8 @@ &__text { position: relative; display: inline-block; + // https://github.com/youzan/vant/issues/7455 + word-break: break-all; } &:not(:last-child)::after { From 5e51dd3332cee09638e4147a959ab4df1c4ba7cf Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 08:05:09 +0800 Subject: [PATCH 07/13] feat(Image): add icon-prefix prop (#7457) --- src/image/README.md | 1 + src/image/README.zh-CN.md | 1 + src/image/index.js | 13 ++++++++-- .../test/__snapshots__/index.spec.js.snap | 14 +++++++++++ src/image/test/index.spec.js | 25 +++++++++++++++++++ 5 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/image/README.md b/src/image/README.md index 83ea8f509..d344bc191 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -77,6 +77,7 @@ Vue.use(Lazyload); | show-loading | Whether to show loading placeholder | _boolean_ | `true` | | error-icon `v2.4.2` | Error icon | _string_ | `photo-fail` | | loading-icon `v2.4.2` | Loading icon | _string_ | `photo` | +| icon-prefix `v2.10.12` | Icon className prefix | _string_ | `van-icon` | ### fit optional value diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index ca26e2797..a6bec222a 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -109,6 +109,7 @@ Vue.use(Lazyload); | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` | | error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` | | loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` | +| icon-prefix `v2.10.12` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | ### 图片填充模式  diff --git a/src/image/index.js b/src/image/index.js index b1daea8ee..30993d464 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -13,6 +13,7 @@ export default createComponent({ height: [Number, String], radius: [Number, String], lazyLoad: Boolean, + iconPrefix: String, showError: { type: Boolean, default: true, @@ -117,7 +118,11 @@ export default createComponent({ return (
{this.slots('loading') || ( - + )}
); @@ -127,7 +132,11 @@ export default createComponent({ return (
{this.slots('error') || ( - + )}
); diff --git a/src/image/test/__snapshots__/index.spec.js.snap b/src/image/test/__snapshots__/index.spec.js.snap index bf6b22e39..6fae403fe 100644 --- a/src/image/test/__snapshots__/index.spec.js.snap +++ b/src/image/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`apply icon-prefix prop to error-icon 1`] = ` +
+
+
+
+`; + +exports[`apply icon-prefix prop to loading-icon 1`] = ` +
+
+
+
+`; + exports[`default slot 1`] = `
diff --git a/src/image/test/index.spec.js b/src/image/test/index.spec.js index 28529a564..6599841d0 100644 --- a/src/image/test/index.spec.js +++ b/src/image/test/index.spec.js @@ -147,6 +147,31 @@ test('loading-icon prop', () => { expect(wrapper).toMatchSnapshot(); }); +test('apply icon-prefix prop to error-icon', () => { + const wrapper = mount(VanImage, { + propsData: { + errorIcon: 'error', + iconPrefix: 'my-icon', + src: 'https://img.yzcdn.cn/vant/cat.jpeg', + }, + }); + + wrapper.find('img').trigger('error'); + + expect(wrapper).toMatchSnapshot(); +}); + +test('apply icon-prefix prop to loading-icon', () => { + const wrapper = mount(VanImage, { + propsData: { + loadingIcon: 'success', + iconPrefix: 'my-icon', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + test('radius prop', () => { const wrapper = mount(VanImage, { propsData: { From 9731d1ac0f4f85bfbd4d999d2e5bd6e39822efae Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 08:12:19 +0800 Subject: [PATCH 08/13] feat(SubmitBar): add button slot (#7458) --- src/submit-bar/README.md | 13 +++++---- src/submit-bar/README.zh-CN.md | 19 ++++++------ src/submit-bar/index.tsx | 29 +++++++++++-------- .../test/__snapshots__/index.spec.js.snap | 8 ++++- src/submit-bar/test/index.spec.js | 13 ++++++++- 5 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 4da09efd4..b7176a1cb 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -60,6 +60,7 @@ Use slot to add custom contents. | Attribute | Description | Type | Default | | --- | --- | --- | --- | | price | Price | _number_ | - | +| decimal-length | Price dicemal length | _number \| string_ | `2` | | label | Price left label | _string_ | `Total：` | | suffix-label | Price right label | _string_ | - | | text-align `v2.3.0` | Price label text align can be set to `left` | _string_ | `right` | @@ -69,7 +70,6 @@ Use slot to add custom contents. | tip | Tip | _string_ | - | | tip-icon | Icon | _string_ | - | | currency | Currency symbol | _string_ | `¥` | -| decimal-length | number of digits to appear after the decimal point | _number \| string_ | `2` | | disabled | Whether to disable button | _boolean_ | `false` | | loading | Whether to show loading icon | _boolean_ | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | @@ -82,8 +82,9 @@ Use slot to add custom contents. ### Slots -| Name | Description | -| ------- | ------------------- | -| default | Custom left content | -| top | Custom top content | -| tip | Custom tips | +| Name | Description | +| ----------------- | ------------------- | +| default | Custom left content | +| button `v2.10.12` | Custom button | +| top | Custom top content | +| tip | Custom tips | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 63b63cf6b..6e6862f52 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -65,18 +65,18 @@ Vue.use(SubmitBar); | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | price | 价格（单位分） | _number_ | - | +| decimal-length | 价格小数点位数 | _number \| string_ | `2` | | label | 价格左侧文案 | _string_ | `合计：` | | suffix-label | 价格右侧文案 | _string_ | - | | text-align `v2.3.0` | 价格文案对齐方向，可选值为 `left` | _string_ | `right` | | button-text | 按钮文字 | _string_ | - | | button-type | 按钮类型 | _string_ | `danger` | | button-color `v2.9.1` | 自定义按钮颜色 | _string_ | - | -| tip | 提示文案 | _string_ | - | -| tip-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| tip | 在订单栏上方的提示文案 | _string_ | - | +| tip-icon | 提示文案左侧的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | | currency | 货币符号 | _string_ | `¥` | -| decimal-length | 价格小数点后位数 | _number \| string_ | `2` | | disabled | 是否禁用按钮 | _boolean_ | `false` | -| loading | 是否显示加载中的按钮 | _boolean_ | `false` | +| loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### Events @@ -87,8 +87,9 @@ Vue.use(SubmitBar); ### Slots -| 名称 | 说明 | -| ------- | -------------------------- | -| default | 自定义订单栏左侧内容 | -| top | 自定义订单栏上方内容 | -| tip | 提示文案中的额外操作和说明 | +| 名称 | 说明 | +| ----------------- | -------------------- | +| default | 自定义订单栏左侧内容 | +| button `v2.10.12` | 自定义按钮 | +| top | 自定义订单栏上方内容 | +| tip | 提示文案中的额外内容 | diff --git a/src/submit-bar/index.tsx b/src/submit-bar/index.tsx index 9e8092b4f..c2e843d08 100644 --- a/src/submit-bar/index.tsx +++ b/src/submit-bar/index.tsx @@ -30,6 +30,7 @@ export type SubmitBarProps = { export type SubmitBarSlots = DefaultSlots & { top?: ScopedSlot; tip?: ScopedSlot; + button?: ScopedSlot; }; const [createComponent, bem, t] = createNamespace('submit-bar'); @@ -84,18 +85,22 @@ function SubmitBar(
{slots.default && slots.default()} {Text()} -
); diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap index 1f52d8d20..ef4265298 100644 --- a/src/submit-bar/test/__snapshots__/index.spec.js.snap +++ b/src/submit-bar/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`button slot 1`] = ` +
+
Custom button
+
+`; + exports[`button-color prop 1`] = `
diff --git a/src/submit-bar/test/index.spec.js b/src/submit-bar/test/index.spec.js index cc1520611..ce81f1744 100644 --- a/src/submit-bar/test/index.spec.js +++ b/src/submit-bar/test/index.spec.js @@ -52,7 +52,7 @@ test('without price', () => { test('top slot', () => { const wrapper = mount(SubmitBar, { scopedSlots: { - top: () => 'top', + top: () => 'Custom Top', }, }); @@ -119,3 +119,14 @@ test('button-color prop', () => { }); expect(wrapper).toMatchSnapshot(); }); + +test('button slot', () => { + const wrapper = mount(SubmitBar, { + buttonText: 'text', + scopedSlots: { + button: () => 'Custom button', + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); From 2bd597ecfde026c25bb34b664b3ee7075059353e Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 08:30:39 +0800 Subject: [PATCH 09/13] docs(Swipe): add resize faq (#7459) --- src/swipe/README.zh-CN.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index ad78882ca..e0e80ccb0 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -234,3 +234,28 @@ export default { ### Swipe 组件功能太少，无法实现复杂效果？ Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。 + +### 组件从隐藏状态切换到显示状态时，无法正确渲染？ + +Swipe 组件在挂载时，会获取自身的宽度，并计算出轮播图的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法正确计算位置。 + +#### 解决方法 + +方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题： + +```html + + + + +``` + +方法二，调用组件的 resize 方法来主动触发重绘： + +```html + +``` + +```js +this.$refs.swipe.resize(); +``` From 836be2c6399e811ade72f5d8704e7fbc77448ad8 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 16:34:55 +0800 Subject: [PATCH 10/13] fix(Picker): fix rendering failure during animation on safari (#7460) --- src/picker/index.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/picker/index.less b/src/picker/index.less index 07d5a172b..2d669864e 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -87,7 +87,8 @@ linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)); background-repeat: no-repeat; background-position: top, bottom; - backface-visibility: hidden; + // fix rendering failure during animation on safari + transform: translateZ(0); pointer-events: none; } From 0cc11a45e1b874197aa223daa065feac950f102a Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 17:35:33 +0800 Subject: [PATCH 11/13] fix(Tabs): incorrect change event in some cases (#7461) --- src/tab/test/__snapshots__/index.spec.js.snap | 12 +++++----- src/tab/test/index.spec.js | 14 +++++++++-- src/tab/test/insert.spec.js | 9 +++++-- src/tabs/index.js | 24 +++++++++++-------- 4 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index 271d18de1..d1e617c65 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -315,10 +315,10 @@ exports[`swipe to switch tab 2`] = `
- - + + -
+
@@ -335,10 +335,10 @@ exports[`swipe to switch tab 3`] = `
- - + + -
+
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js index 1ca16f2a1..df69e2d2e 100644 --- a/src/tab/test/index.spec.js +++ b/src/tab/test/index.spec.js @@ -61,12 +61,17 @@ test('swipe to switch tab', async () => { const onChange = jest.fn(); const wrapper = mount({ template: ` - + Text Text Text `, + data() { + return { + active: 0, + }; + }, methods: { onChange, }, @@ -174,7 +179,7 @@ test('name prop', async () => { const wrapper = mount({ template: ` - + Text Text Text @@ -185,6 +190,11 @@ test('name prop', async () => { onChange, onDisabled, }, + data() { + return { + active: 0, + }; + }, }); await later(); diff --git a/src/tab/test/insert.spec.js b/src/tab/test/insert.spec.js index 3c28b4053..3bf617316 100644 --- a/src/tab/test/insert.spec.js +++ b/src/tab/test/insert.spec.js @@ -27,9 +27,10 @@ test('insert tab dynamically', async () => { }); test('insert tab with name dynamically', async () => { + const onChange = jest.fn(); const wrapper = mount({ template: ` - + 2 1 @@ -37,14 +38,18 @@ test('insert tab with name dynamically', async () => { data() { return { insert: false, - active: [{ name: 'foo', title: 'foo' }], + active: 'foo', }; }, + methods: { + onChange, + }, }); await later(); wrapper.setData({ insert: true }); expect(wrapper).toMatchSnapshot(); + expect(onChange).toHaveBeenCalledTimes(0); }); // this case will throw wierd error in index.spec.js diff --git a/src/tabs/index.js b/src/tabs/index.js index 4431d447e..491cea15c 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -240,19 +240,23 @@ export default createComponent({ }, setCurrentIndex(currentIndex) { - currentIndex = this.findAvailableTab(currentIndex); + const newIndex = this.findAvailableTab(currentIndex); - if (isDef(currentIndex) && currentIndex !== this.currentIndex) { - const shouldEmitChange = this.currentIndex !== null; - this.currentIndex = currentIndex; - this.$emit('input', this.currentName); + if (!isDef(newIndex)) { + return; + } + + const newTab = this.children[newIndex]; + const newName = newTab.computedName; + const shouldEmitChange = this.currentIndex !== null; + + this.currentIndex = newIndex; + + if (newName !== this.active) { + this.$emit('input', newName); if (shouldEmitChange) { - this.$emit( - 'change', - this.currentName, - this.children[currentIndex].title - ); + this.$emit('change', newName, newTab.title); } } }, From 75dc483cd0cd8646da75c98b73032c61e5290ddf Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 31 Oct 2020 17:46:18 +0800 Subject: [PATCH 12/13] chore: release 2.10.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0cd94f471..3829be105 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "2.10.11", + "version": "2.10.12", "description": "Mobile UI Components built on Vue", "main": "lib/index.js", "module": "es/index.js", From fcadc2d79fbf85a9f76965808c3096100712f9b1 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 31 Oct 2020 17:51:30 +0800 Subject: [PATCH 13/13] docs(changelog): 2.10.12 --- docs/markdown/changelog.en-US.md | 25 ++++++++++++++++++++++++- docs/markdown/changelog.zh-CN.md | 25 ++++++++++++++++++++++++- 2 files changed, 48 insertions(+), 2 deletions(-) diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index e12c39a6f..1a13c38fe 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -10,7 +10,30 @@ 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.11](https://github.com/youzan/vant/compare/v2.10.11-beta.0...v2.10.11) +### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) + +`2020-10-31` + +**Feature** + +- Image: add icon-prefix prop [#7457](https://github.com/youzan/vant/issues/7457) +- Progress: add resize method [#5161](https://github.com/youzan/vant/issues/5161) +- SubmitBar: add button slot [#7458](https://github.com/youzan/vant/issues/7458) + +**style** + +- ActionSheet: keep the cancel button at the bottom [#7401](https://github.com/youzan/vant/issues/7401) +- Popup: adjust round border radius to 16px [#7421](https://github.com/youzan/vant/issues/7421) +- Sidebar: fix long number wrap [#7456](https://github.com/youzan/vant/issues/7456) + +**Bug Fixes** + +- GridItem: should not emit deprecation warning [#7433](https://github.com/youzan/vant/issues/7433) +- Picker: fix rendering failure during animation on safari [#7460](https://github.com/youzan/vant/issues/7460) +- Tabs: incorrect change event in some cases [#7461](https://github.com/youzan/vant/issues/7461) +- Tabs: should keep active value after insert item [#7445](https://github.com/youzan/vant/issues/7445) + +### [v2.10.11](https://github.com/youzan/vant/compare/v2.10.11...v2.10.11) `2020-10-24` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 00885d399..fd073c78a 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -10,7 +10,30 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。 -### [v2.10.11](https://github.com/youzan/vant/compare/v2.10.11-beta.0...v2.10.11) +### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) + +`2020-10-31` + +**Feature** + +- Image: 新增 icon-prefix 属性 [#7457](https://github.com/youzan/vant/issues/7457) +- Progress: 新增 resize 属性 [#5161](https://github.com/youzan/vant/issues/5161) +- SubmitBar: 新增 button 插槽，用于自定义按钮 [#7458](https://github.com/youzan/vant/issues/7458) + +**style** + +- ActionSheet: 当选项较多时，取消按钮现在会固定在底部 [#7401](https://github.com/youzan/vant/issues/7401) +- Popup: 圆角弹窗的圆角大小从 20px 调整为 16px [#7421](https://github.com/youzan/vant/issues/7421) +- Sidebar: 修复文本为长数字时无法自动换行的问题 [#7456](https://github.com/youzan/vant/issues/7456) + +**Bug Fixes** + +- GridItem: 修复使用 badge 属性时会在控制台抛出 warning 的问题 [#7433](https://github.com/youzan/vant/issues/7433) +- Picker: 修复在 safari 上动画弹出过程中遮罩层闪烁的问题 [#7460](https://github.com/youzan/vant/issues/7460) +- Tabs: 修复在个别情况下错误地抛出 change 事件的问题 [#7461](https://github.com/youzan/vant/issues/7461) +- Tabs: 修复动态插入时 active 值可能错误的问题 [#7445](https://github.com/youzan/vant/issues/7445) + +### [v2.10.11](https://github.com/youzan/vant/compare/v2.10.11...v2.10.11) `2020-10-24`