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

feat: Sticky/Picker support vw unit (#6816)

Browse Source
This commit is contained in:
neverland 2020-07-19 15:40:39 +08:00 committed by GitHub
parent cda3610233
commit 839f65e533
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/area/README.md
View File

@ -64,7 +64,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
| area-list | Area list data | _object_ | - |
| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
| columns-num | Level of picker | _number \| string_ | `3` |
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |

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

@ -64,7 +64,7 @@ Vue.use(Area);
| area-list | 省市区数据，格式见下方 | _object_ | - |
| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
| loading | 是否显示加载状态 | _boolean_ | `false` |
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |

2
src/datetime-picker/README.md
View File

@ -259,7 +259,7 @@ export default {
| filter | Option filter | _(type, vals) => vals_ | - |
| formatter | Option text formatter | _(type, val) => val_ | - |
| columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |

2
src/datetime-picker/README.zh-CN.md
View File

@ -268,7 +268,7 @@ export default {
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |

2
src/picker/README.md
View File

@ -252,7 +252,7 @@ export default {
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
| default-index | Default value index of single column picker | _number \| string_ | `0` |
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |

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

@ -275,7 +275,7 @@ export default {
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |

2
src/sticky/README.md
View File

@ -56,7 +56,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| offset-top `v2.8.7` | Offset top, supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
| offset-top `v2.8.7` | Offset top, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
| z-index | z-index when sticky | _number \| string_ | `99` |
| container | Container DOM | _Element_ | - |

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

@ -66,7 +66,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
| container | 容器对应的 HTML 节点 | _Element_ | - |

8
src/sticky/test/__snapshots__/index.spec.js.snap
View File

@ -36,6 +36,14 @@ exports[`offset-top with rem unit 1`] = `
</div>
`;
exports[`offset-top with vw unit 1`] = `
<div style="height: 10px;">
<div class="van-sticky van-sticky--fixed" style="top: 30px;">
Content
</div>
</div>
`;
exports[`sticky to top 1`] = `
<div style="height: 10px;">
<div class="van-sticky">

16
src/sticky/test/index.spec.js
View File

@ -63,6 +63,22 @@ test('offset-top with rem unit', () => {
window.getComputedStyle = originGetComputedStyle;
});
test('offset-top with vw unit', () => {
window.innerWidth = 300;
const wrapper = mount({
template: `
<van-sticky style="height: 10px;" offset-top="10vw">
Content
</van-sticky>
`,
});
mockScrollTop(100);
expect(wrapper).toMatchSnapshot();
mockScrollTop(0);
});
test('should not trigger scroll event when hidden', () => {
const scroll = jest.fn();
mount({

2
src/tab/README.md
View File

@ -205,7 +205,7 @@ In scrollspy mode, the list of content will be tiled
| swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
| scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
| offset-top `v2.8.7` | Sticky offset top , supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `4` | - |
| title-active-color | Title active color | _string_ | - |
| title-inactive-color | Title inactive color | _string_ | - |

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

@ -209,7 +209,7 @@ export default {
| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
| scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `4` |
| title-active-color | 标题选中态颜色 | _string_ | - |
| title-inactive-color | 标题默认态颜色 | _string_ | - |

17
src/utils/format/unit.ts
View File

@ -1,4 +1,4 @@
import { isDef } from '..';
import { isDef, inBrowser } from '..';
import { isNumeric } from '../validate/number';
export function addUnit(value?: string | number): string | undefined {
@ -30,13 +30,24 @@ function convertRem(value: string) {
return +value * getRootFontSize();
}
function convertVw(value: string) {
value = value.replace(/vw/g, '');
return (+value * window.innerWidth) / 100;
}
export function unitToPx(value: string | number): number {
if (typeof value === 'number') {
return value;
}
if (value.indexOf('rem') !== -1) {
return convertRem(value);
if (inBrowser) {
if (value.indexOf('rem') !== -1) {
return convertRem(value);
}
if (value.indexOf('vw') !== -1) {
return convertVw(value);
}
}
return parseFloat(value);