diff --git a/README.zh-CN.md b/README.zh-CN.md index a5598c25b..0a18164ee 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -24,10 +24,16 @@ --- +### 介绍 + +Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 + +目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。 + ## 特性 -- 60+ 高质量组件 -- 90% 单元测试覆盖率 +- 60+ 高质量组件，覆盖移动端各类场景 +- 90%+ 单元测试覆盖率，提供稳定性保障 - 完善的中英文文档和示例 - 支持按需引入 - 支持主题定制 @@ -72,7 +78,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手 ## 加入我们 -**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。 +**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。 我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有： diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md index ad310a9d0..a2fe61b50 100644 --- a/docs/markdown/home.zh-CN.md +++ b/docs/markdown/home.zh-CN.md @@ -6,15 +6,21 @@ +### 介绍 + +Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

+ +目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。 + ### 特性 -- 60+ 高质量组件 -- 90% 单元测试覆盖率 +- 60+ 高质量组件，覆盖移动端各类场景 +- 90%+ 单元测试覆盖率，提供稳定性保障 - 完善的中英文文档和示例 - 支持按需引入 - 支持主题定制 - 支持国际化 -- 支持 TS +- 支持 TypeScript - 支持 SSR ### 快速上手 @@ -33,7 +39,7 @@ ### 加入我们 -**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。 +**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。 我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有： diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 4d61d6498..9e4c7050e 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -254,7 +254,6 @@ export default createComponent({ () => props.realRowHeight, () => { height.value = useRect(monthRef).height; - console.log('height.value', height.value); } ); diff --git a/src/calendar/index.js b/src/calendar/index.js index 4ee5c1bbb..0fcaaa16f 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -1,5 +1,6 @@ // Utils import { pick } from '../utils'; +import { raf } from '../utils/dom/raf'; import { isDate } from '../utils/validate/date'; import { getScrollTop } from '../utils/dom/scroll'; import { @@ -191,13 +192,13 @@ export default createComponent({ this.$refs.body.getBoundingClientRect().height ); this.onScroll(); + this.scrollIntoView(); }); - this.scrollIntoView(); }, // scroll to current month scrollIntoView() { - this.$nextTick(() => { + raf(() => { const { currentDate } = this; if (!currentDate) { @@ -258,31 +259,27 @@ export default createComponent({ const { body } = this.$refs; const { months, monthRefs } = this; const top = getScrollTop(body); + const bottom = top + this.bodyHeight; + const heights = months.map( (item, index) => monthRefs[index].height.value ); const heightSum = heights.reduce((a, b) => a + b, 0); // iOS scroll bounce may exceed the range - let bottom = top + this.bodyHeight; if (bottom > heightSum && top > 0) { - bottom = heightSum; + return; } let height = 0; let currentMonth; - - // add offset to avoid rem accuracy issues - // see: https://github.com/youzan/vant/issues/6929 - const viewportOffset = 50; - const viewportTop = top - viewportOffset; - const viewportBottom = bottom + viewportOffset; + let visibleIndex; for (let i = 0; i < months.length; i++) { - const visible = - height <= viewportBottom && height + heights[i] >= viewportTop; + const visible = height <= bottom && height + heights[i] >= top; if (visible && !currentMonth) { + visibleIndex = i; currentMonth = monthRefs[i]; } @@ -293,10 +290,14 @@ export default createComponent({ }); } - monthRefs[i].setVisible(visible); height += heights[i]; } + months.forEach((month, index) => { + const visible = index >= visibleIndex - 1 && index <= visibleIndex + 1; + monthRefs[index].setVisible(visible); + }); + /* istanbul ignore else */ if (currentMonth) { this.subtitle = currentMonth.getTitle(); diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap index b0a56dda3..74018afa8 100644 --- a/src/calendar/test/__snapshots__/demo.spec.js.snap +++ b/src/calendar/test/__snapshots__/demo.spec.js.snap @@ -139,40 +139,7 @@ exports[`renders demo correctly 1`] = `
2012年3月
-
-
3
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
+
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 0b7a2a8f2..87c721207 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -97,7 +97,7 @@ app.use(CellGroup); diff --git a/src/coupon-cell/index.js b/src/coupon-cell/index.js index b2daf74ef..3aa3b059a 100644 --- a/src/coupon-cell/index.js +++ b/src/coupon-cell/index.js @@ -1,4 +1,4 @@ -import { createNamespace } from '../utils'; +import { isDef, createNamespace } from '../utils'; import Cell from '../cell'; const [createComponent, bem, t] = createNamespace('coupon-cell'); @@ -8,7 +8,14 @@ function formatValue(props) { const coupon = coupons[+chosenCoupon]; if (coupon) { - const value = coupon.value || coupon.denominations || 0; + let value = 0; + + if (isDef(coupon.value)) { + ({ value } = coupon); + } else if (isDef(coupon.denominations)) { + value = coupon.denominations; + } + return `-${currency} ${(value / 100).toFixed(2)}`; } diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap index 1c6330ea1..614ef278f 100644 --- a/src/coupon-list/test/__snapshots__/index.spec.js.snap +++ b/src/coupon-list/test/__snapshots__/index.spec.js.snap @@ -54,6 +54,15 @@ exports[`render coupon cell with coupon 1`] = ` `; + +exports[`render coupon cell with zero discount 1`] = ` +
+
优惠券
+
-¥ 0.00
+ +
+`; + exports[`render coupon list 1`] = `
diff --git a/src/coupon-list/test/index.spec.js b/src/coupon-list/test/index.spec.js index 1fa8732e6..a0e2053d4 100644 --- a/src/coupon-list/test/index.spec.js +++ b/src/coupon-list/test/index.spec.js @@ -26,6 +26,12 @@ const coupon3 = { denominations: 123, }; +const coupon4 = { + ...coupon, + startAt: 1600327871, + endAt: 1700327871, +}; + const emptyCoupon = { id: 0, discount: 0, @@ -162,3 +168,13 @@ test('render coupon cell with coupon', () => { }); expect(wrapper).toMatchSnapshot(); }); + +test('render coupon cell with zero discount', () => { + const wrapper = mount(CouponCell, { + propsData: { + coupons: [{ ...coupon4, value: 0, denominations: 150 }], + chosenCoupon: 0, + }, + }); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/field/index.less b/src/field/index.less index 88712250b..645f79769 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -55,10 +55,10 @@ &:disabled { color: @field-input-disabled-text-color; - background-color: transparent; cursor: not-allowed; opacity: 1; - -webkit-text-fill-color: currentColor; // fix disabled color in iOS + // fix disabled color in mobile safari + -webkit-text-fill-color: @field-input-disabled-text-color; } &:read-only { diff --git a/src/swipe/index.js b/src/swipe/index.js index bdc5e24bc..c29dd9c5a 100644 --- a/src/swipe/index.js +++ b/src/swipe/index.js @@ -243,8 +243,8 @@ export default createComponent({ state.rect = rect; state.swiping = true; state.active = active; - state.width = Math.round(+props.width || rect.width); - state.height = Math.round(+props.height || rect.height); + state.width = Math.floor(+props.width || rect.width); + state.height = Math.floor(+props.height || rect.height); state.offset = getTargetOffset(active); children.forEach((swipe) => { swipe.setOffset(0); diff --git a/src/swipe/index.less b/src/swipe/index.less index af15d62cb..6ae3b7d1f 100644 --- a/src/swipe/index.less +++ b/src/swipe/index.less @@ -41,7 +41,8 @@ background-color: @swipe-indicator-inactive-background-color; border-radius: 100%; opacity: @swipe-indicator-inactive-opacity; - transition: opacity 0.2s; + transition: opacity @animation-duration-fast, + background-color @animation-duration-fast; &:not(:last-child) { margin-right: @swipe-indicator-size;