mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-06-04 01:28:19 +08:00
Compare commits
3 Commits
e4dfe8e4a8
...
a5fedbb6ac
| Author | SHA1 | Date | |
|---|---|---|---|
|
a5fedbb6ac | ||
|
02f0de8351 | ||
|
|
a126f1c6e4 |
@ -80,10 +80,9 @@ Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to
|
|||||||
npm i babel-plugin-import -D
|
npm i babel-plugin-import -D
|
||||||
```
|
```
|
||||||
|
|
||||||
Set babel config in .babelrc or babel-loader:
|
Set babel config in .babelrc or babel.config.js:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// Note: Don't set libraryDirectory if you are using webpack 1.
|
|
||||||
{
|
{
|
||||||
"plugins": [
|
"plugins": [
|
||||||
[
|
[
|
||||||
@ -98,45 +97,56 @@ Set babel config in .babelrc or babel-loader:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Then you can import components from vant:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// For users who use babel7, that can be configured in babel.config.js
|
// Input
|
||||||
module.exports = {
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
// Output
|
||||||
|
import Button from 'vant/es/button';
|
||||||
|
import 'vant/es/button/style';
|
||||||
|
```
|
||||||
|
|
||||||
|
> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
|
||||||
|
|
||||||
|
### 2. Vite Plugin
|
||||||
|
|
||||||
|
If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm i vite-plugin-style-import -D
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
// vite.config.js
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import styleImport from 'vite-plugin-style-import';
|
||||||
|
|
||||||
|
export default {
|
||||||
plugins: [
|
plugins: [
|
||||||
[
|
vue(),
|
||||||
'import',
|
styleImport({
|
||||||
{
|
libs: [
|
||||||
libraryName: 'vant',
|
{
|
||||||
libraryDirectory: 'es',
|
libraryName: 'vant',
|
||||||
style: true,
|
esModule: true,
|
||||||
},
|
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||||
'vant',
|
},
|
||||||
],
|
],
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Then you can import components from vant:
|
### 3. Manually import
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Button } from 'vant';
|
import Button from 'vant/es/button';
|
||||||
|
import 'vant/es/button/style';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Vite Plugin
|
### 4. Import all components
|
||||||
|
|
||||||
If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) or [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) instead.
|
|
||||||
|
|
||||||
#### TypeScript Plugin
|
|
||||||
|
|
||||||
If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
|
|
||||||
|
|
||||||
### 2. Manually import
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Button from 'vant/lib/button';
|
|
||||||
import 'vant/lib/button/style';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Import all components
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
|
|||||||
@ -92,19 +92,18 @@ vue ui
|
|||||||
|
|
||||||
## 引入组件
|
## 引入组件
|
||||||
|
|
||||||
### 方式一. 自动按需引入组件 (推荐)
|
### 方式一. 通过 babel 插件按需引入组件
|
||||||
|
|
||||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
|
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 安装插件
|
# 安装插件
|
||||||
npm i babel-plugin-import -D
|
npm i babel-plugin-import -D
|
||||||
```
|
```
|
||||||
|
|
||||||
在.babelrc 中添加配置：
|
在.babelrc 或 babel.config.js 中添加配置：
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// 注意：webpack 1 无需设置 libraryDirectory
|
|
||||||
{
|
{
|
||||||
"plugins": [
|
"plugins": [
|
||||||
[
|
[
|
||||||
@ -119,48 +118,61 @@ npm i babel-plugin-import -D
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
|
// 原始代码
|
||||||
module.exports = {
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
// 编译后代码
|
||||||
|
import Button from 'vant/es/button';
|
||||||
|
import 'vant/es/button/style';
|
||||||
|
```
|
||||||
|
|
||||||
|
> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
|
||||||
|
|
||||||
|
### 方式二. 在 Vite 项目中按需引入组件
|
||||||
|
|
||||||
|
对于 vite 项目，可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现按需引入, 原理和 `babel-plugin-import` 类似。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 安装插件
|
||||||
|
npm i vite-plugin-style-import -D
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
// vite.config.js
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import styleImport from 'vite-plugin-style-import';
|
||||||
|
|
||||||
|
export default {
|
||||||
plugins: [
|
plugins: [
|
||||||
[
|
vue(),
|
||||||
'import',
|
styleImport({
|
||||||
{
|
libs: [
|
||||||
libraryName: 'vant',
|
{
|
||||||
libraryDirectory: 'es',
|
libraryName: 'vant',
|
||||||
style: true,
|
esModule: true,
|
||||||
},
|
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||||
'vant',
|
},
|
||||||
],
|
],
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
接着你可以在代码中直接引入 Vant 组件：
|
### 方式三. 手动按需引入组件
|
||||||
|
|
||||||
|
在不使用插件的情况下，可以手动引入需要使用的组件和样式。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 插件会自动将代码转化为方式二中的按需引入形式
|
// 引入组件
|
||||||
import { Button } from 'vant';
|
import Button from 'vant/es/button';
|
||||||
|
// 引入组件对应的样式，若组件没有样式文件，则无须引入
|
||||||
|
import 'vant/es/button/style';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Vite 插件
|
### 方式四. 导入所有组件
|
||||||
|
|
||||||
对于 vite 项目，可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 或 [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) 实现按需引入。
|
|
||||||
|
|
||||||
#### TypeScript 插件
|
|
||||||
|
|
||||||
如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
|
|
||||||
|
|
||||||
### 方式二. 手动按需引入组件
|
|
||||||
|
|
||||||
在不使用插件的情况下，可以手动引入需要的组件。
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Button from 'vant/lib/button';
|
|
||||||
import 'vant/lib/button/style';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方式三. 导入所有组件
|
|
||||||
|
|
||||||
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
|
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
|
||||||
|
|
||||||
|
|||||||
@ -1,224 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`filter prop 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">2020</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">25</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">25</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">35</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">40</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">45</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">50</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">55</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`formatter prop 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">2010 year</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">2020 year</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05 month</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 month</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05 day</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 day</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15 day</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20 day</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">25 day</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30 day</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20 hour</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">25 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">35 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">40 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">45 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">50 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">55 minute</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
596
src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap
Normal file
596
src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap
Normal file
@ -0,0 +1,596 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`filter prop 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
2020
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
25
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
25
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
35
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
40
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
45
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
50
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
55
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`formatter prop 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
2010 year
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
2020 year
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05 month
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 month
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
25 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30 day
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
25 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
35 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
40 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
45 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
50 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
55 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,35 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`should render title slot correctly 1`] = `<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>`;
|
|
||||||
|
|
||||||
exports[`time type 1`] = `
|
|
||||||
<div class="van-picker van-datetime-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">22</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">23</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">58</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">59</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render title slot correctly 1`] = `
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
Custom title
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`time type 1`] = `
|
||||||
|
<div class="van-picker van-datetime-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
22
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
23
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
58
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
59
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,177 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`filter prop 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">40</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">50</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`format initial value 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">22</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">23</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">58</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">59</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`formatter prop 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">05 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">15 hour</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20 hour</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">10 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">20 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">30 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">40 minute</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">50 minute</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`max-hour & max-minute 1`] = `
|
|
||||||
<div class="van-picker">
|
|
||||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
|
||||||
<!---->
|
|
||||||
<div class="van-picker__columns" style="height: 264px;">
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">01</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">02</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker-column">
|
|
||||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">00</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">01</div>
|
|
||||||
</li>
|
|
||||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
|
||||||
<div class="van-ellipsis">02</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
|
||||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
453
src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap
Normal file
453
src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap
Normal file
@ -0,0 +1,453 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`filter prop 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
40
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
50
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`format initial value 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
22
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
23
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
58
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
59
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`formatter prop 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
05 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
15 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 hour
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
10 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
20 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
30 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
40 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
50 minute
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`max-hour & max-minute 1`] = `
|
||||||
|
<div class="van-picker">
|
||||||
|
<div class="van-picker__toolbar">
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__cancel"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="van-picker__confirm"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__columns"
|
||||||
|
style="height: 264px;"
|
||||||
|
>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
01
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
02
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker-column">
|
||||||
|
<ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
|
||||||
|
class="van-picker-column__wrapper"
|
||||||
|
>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item van-picker-column__item--selected"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
00
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
01
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li role="button"
|
||||||
|
style="height: 44px;"
|
||||||
|
tabindex="0"
|
||||||
|
class="van-picker-column__item"
|
||||||
|
>
|
||||||
|
<div class="van-ellipsis">
|
||||||
|
02
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="van-picker__mask"
|
||||||
|
style="background-size: 100% 110px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline-unset--top-bottom van-picker__frame"
|
||||||
|
style="height: 44px;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,22 +1,22 @@
|
|||||||
import DatePicker from '../DatePicker';
|
import DatePicker from '../DatePicker';
|
||||||
import { mount, later, triggerDrag } from '../../../test';
|
import { mount, later, triggerDrag } from '../../../test';
|
||||||
|
|
||||||
function filter(type, options) {
|
function filter(type: string, options: string[]): string[] {
|
||||||
const mod = type === 'year' ? 10 : 5;
|
const mod = type === 'year' ? 10 : 5;
|
||||||
return options.filter((option) => option % mod === 0);
|
return options.filter((option: string) => Number(option) % mod === 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatter(type, value) {
|
function formatter(type: string, value: string): string {
|
||||||
return `${value} ${type}`;
|
return `${value} ${type}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
test('filter prop', () => {
|
test('filter prop', async () => {
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
filter,
|
filter,
|
||||||
minDate: new Date(2020, 0, 1),
|
minDate: new Date(2020, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
value: new Date(2020, 10, 1, 0, 0),
|
modelValue: new Date(2020, 10, 1, 0, 0),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -30,7 +30,7 @@ test('formatter prop', async () => {
|
|||||||
formatter,
|
formatter,
|
||||||
minDate: new Date(2010, 0, 1),
|
minDate: new Date(2010, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
value: new Date(2020, 10, 1, 0, 0),
|
modelValue: new Date(2020, 10, 1, 0, 0),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -40,7 +40,7 @@ test('formatter prop', async () => {
|
|||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||||
await later();
|
await later();
|
||||||
|
|
||||||
expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
|
expect((wrapper.vm as Record<string, any>).getPicker().getValues()).toEqual([
|
||||||
'2020 year',
|
'2020 year',
|
||||||
'05 month',
|
'05 month',
|
||||||
'05 day',
|
'05 day',
|
||||||
@ -54,89 +54,93 @@ test('confirm event', () => {
|
|||||||
|
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: date,
|
modelValue: date,
|
||||||
minDate: new Date(2020, 0, 1),
|
minDate: new Date(2020, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020);
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('year-month type', () => {
|
test('year-month type', async () => {
|
||||||
const date = new Date(2020, 10, 1, 0, 0);
|
const date = new Date(2020, 10, 1, 0, 0);
|
||||||
|
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
type: 'year-month',
|
type: 'year-month',
|
||||||
value: date,
|
modelValue: date,
|
||||||
minDate: new Date(2020, 0, 1),
|
minDate: new Date(2020, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020);
|
||||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
|
||||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(0);
|
||||||
|
|
||||||
|
triggerDrag(wrapper.findAll('.van-picker-column')[0], 0, -100);
|
||||||
|
await later();
|
||||||
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -100);
|
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -100);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[2][0].getFullYear()).toEqual(2025);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getFullYear()).toEqual(2025);
|
||||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(10);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('month-day type', () => {
|
test('month-day type', async () => {
|
||||||
const date = new Date(2020, 10, 1, 0, 0);
|
const date = new Date(2020, 10, 1, 0, 0);
|
||||||
|
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
type: 'month-day',
|
type: 'month-day',
|
||||||
value: date,
|
modelValue: date,
|
||||||
minDate: new Date(2020, 0, 1),
|
minDate: new Date(2020, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1);
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
|
||||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1);
|
||||||
|
|
||||||
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||||
|
await later();
|
||||||
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
|
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
|
||||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('datehour type', async () => {
|
test('datehour type', () => {
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
minDate: new Date(2010, 0, 1),
|
minDate: new Date(2010, 0, 1),
|
||||||
maxDate: new Date(2025, 10, 1),
|
maxDate: new Date(2025, 10, 1),
|
||||||
value: new Date(2020, 10, 1, 0, 0),
|
modelValue: new Date(2020, 10, 1, 0, 0),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0].getHours()).toEqual(0);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getHours()).toEqual(0);
|
||||||
|
|
||||||
triggerDrag(wrapper.findAll('.van-picker-column')[3], 0, -300);
|
triggerDrag(wrapper.findAll('.van-picker-column')[3], 0, -300);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[1][0].getHours()).toEqual(23);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getHours()).toEqual(23);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('cancel event', () => {
|
test('cancel event', () => {
|
||||||
@ -150,42 +154,42 @@ test('max-date prop', () => {
|
|||||||
const maxDate = new Date(2010, 5, 0, 0, 0);
|
const maxDate = new Date(2010, 5, 0, 0, 0);
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: new Date(2020, 10, 30, 30, 30),
|
modelValue: new Date(2020, 10, 30, 30, 30),
|
||||||
maxDate,
|
maxDate,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(maxDate);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(maxDate);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('min-date prop', () => {
|
test('min-date prop', () => {
|
||||||
const minDate = new Date(2030, 0, 0, 0, 0);
|
const minDate = new Date(2030, 0, 0, 0, 0);
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: new Date(2020, 0, 0, 0, 0),
|
modelValue: new Date(2020, 0, 0, 0, 0),
|
||||||
minDate,
|
minDate,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('dynamic set value', () => {
|
test('dynamic set value', async () => {
|
||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: new Date(2019, 1, 1),
|
modelValue: new Date(2019, 1, 1),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.setProps({ value: new Date(2019, 1, 1) });
|
await wrapper.setProps({ modelValue: new Date(2019, 1, 1) });
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
wrapper.setProps({ value: new Date(2025, 1, 1) });
|
await wrapper.setProps({ modelValue: new Date(2025, 1, 1) });
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
|
|
||||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2019);
|
||||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('use min-date with filter', async () => {
|
test('use min-date with filter', async () => {
|
||||||
@ -196,10 +200,10 @@ test('use min-date with filter', async () => {
|
|||||||
props: {
|
props: {
|
||||||
minDate,
|
minDate,
|
||||||
maxDate,
|
maxDate,
|
||||||
value: new Date(2020, 0, 0, 0, 0),
|
modelValue: new Date(2020, 0, 0, 0, 0),
|
||||||
filter(type, values) {
|
filter(type: string, values: string[]) {
|
||||||
if (type === 'minute') {
|
if (type === 'minute') {
|
||||||
return values.filter((value) => value % 30 === 0);
|
return values.filter((value) => Number(value) % 30 === 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return values;
|
return values;
|
||||||
@ -210,5 +214,7 @@ test('use min-date with filter', async () => {
|
|||||||
await later();
|
await later();
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(new Date(2030, 0, 0, 0, 30));
|
expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(
|
||||||
|
new Date(2030, 0, 0, 0, 30)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
@ -6,9 +6,9 @@ test('confirm & cancel event', () => {
|
|||||||
const onCancel = jest.fn();
|
const onCancel = jest.fn();
|
||||||
|
|
||||||
const wrapper = mount(DatetimePicker, {
|
const wrapper = mount(DatetimePicker, {
|
||||||
listeners: {
|
props: {
|
||||||
confirm: onConfirm,
|
onConfirm,
|
||||||
cancel: onCancel,
|
onCancel,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -33,18 +33,19 @@ test('time type', () => {
|
|||||||
|
|
||||||
test('getPicker method', () => {
|
test('getPicker method', () => {
|
||||||
const wrapper = mount(DatetimePicker);
|
const wrapper = mount(DatetimePicker);
|
||||||
|
|
||||||
expect(wrapper.vm.getPicker()).toBeTruthy();
|
expect(wrapper.vm.getPicker()).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should render title slot correctly', () => {
|
test('should render title slot correctly', () => {
|
||||||
const wrapper = mount(DatetimePicker, {
|
const wrapper = mount(DatetimePicker, {
|
||||||
propsData: {
|
props: {
|
||||||
showToolbar: true,
|
showToolbar: true,
|
||||||
},
|
},
|
||||||
scopedSlots: {
|
slots: {
|
||||||
title: () => 'Custom title',
|
title: () => 'Custom title',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.find('.van-picker__toolbar')).toMatchSnapshot();
|
expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import {later, mount, triggerDrag} from "../../../test"
|
import { later, mount, triggerDrag } from '../../../test';
|
||||||
import DatePicker from "../DatePicker"
|
import DatePicker from '../DatePicker';
|
||||||
|
|
||||||
test('month-day type', async () => {
|
test('month-day type', async () => {
|
||||||
const date = new Date(2020, 10, 1, 0, 0);
|
const date = new Date(2020, 10, 1, 0, 0);
|
||||||
@ -15,20 +15,20 @@ test('month-day type', async () => {
|
|||||||
|
|
||||||
await later();
|
await later();
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1);
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
|
||||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1);
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
|
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
|
||||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('v-model', async () => {
|
test('v-model', async () => {
|
||||||
@ -37,12 +37,12 @@ test('v-model', async () => {
|
|||||||
const wrapper = mount(DatePicker, {
|
const wrapper = mount(DatePicker, {
|
||||||
props: {
|
props: {
|
||||||
minDate,
|
minDate,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('value has an inital value', async () => {
|
test('value has an inital value', async () => {
|
||||||
@ -55,5 +55,5 @@ test('value has an inital value', async () => {
|
|||||||
|
|
||||||
await later();
|
await later();
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
|
expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue);
|
||||||
});
|
});
|
||||||
@ -1,12 +1,13 @@
|
|||||||
import TimePicker from '../TimePicker';
|
import TimePicker from '../TimePicker';
|
||||||
import { mount, later, triggerDrag } from '../../../test';
|
import { mount, later, triggerDrag } from '../../../test';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
function filter(type, options) {
|
function filter(type: string, options: string[]): string[] {
|
||||||
const mod = type === 'minute' ? 10 : 5;
|
const mod = type === 'minute' ? 10 : 5;
|
||||||
return options.filter((option) => option % mod === 0);
|
return options.filter((option) => Number(option) % mod === 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatter(type, value) {
|
function formatter(type: string, value: string): string {
|
||||||
return `${value} ${type}`;
|
return `${value} ${type}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -24,7 +25,7 @@ test('format initial value', () => {
|
|||||||
test('max-hour & max-minute', () => {
|
test('max-hour & max-minute', () => {
|
||||||
const wrapper = mount(TimePicker, {
|
const wrapper = mount(TimePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: '23:59',
|
modelValue: '23:59',
|
||||||
maxHour: 2,
|
maxHour: 2,
|
||||||
maxMinute: 2,
|
maxMinute: 2,
|
||||||
},
|
},
|
||||||
@ -37,7 +38,7 @@ test('filter prop', () => {
|
|||||||
const wrapper = mount(TimePicker, {
|
const wrapper = mount(TimePicker, {
|
||||||
props: {
|
props: {
|
||||||
filter,
|
filter,
|
||||||
value: '12:00',
|
modelValue: '12:00',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -49,7 +50,7 @@ test('formatter prop', async () => {
|
|||||||
props: {
|
props: {
|
||||||
filter,
|
filter,
|
||||||
formatter,
|
formatter,
|
||||||
value: '12:00',
|
modelValue: '12:00',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -59,7 +60,7 @@ test('formatter prop', async () => {
|
|||||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||||
await later();
|
await later();
|
||||||
|
|
||||||
expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
|
expect((wrapper.vm as Record<string, any>).getPicker().getValues()).toEqual([
|
||||||
'20 hour',
|
'20 hour',
|
||||||
'00 minute',
|
'00 minute',
|
||||||
]);
|
]);
|
||||||
@ -68,13 +69,13 @@ test('formatter prop', async () => {
|
|||||||
test('confirm event', () => {
|
test('confirm event', () => {
|
||||||
const wrapper = mount(TimePicker, {
|
const wrapper = mount(TimePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: '12:00',
|
modelValue: '12:00',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('23:00');
|
expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('23:00');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('cancel event', () => {
|
test('cancel event', () => {
|
||||||
@ -84,69 +85,68 @@ test('cancel event', () => {
|
|||||||
expect(wrapper.emitted('cancel')).toBeTruthy();
|
expect(wrapper.emitted('cancel')).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('dynamic set value', () => {
|
test('dynamic set value', async () => {
|
||||||
const wrapper = mount(TimePicker);
|
const wrapper = mount(TimePicker);
|
||||||
|
|
||||||
wrapper.setProps({ value: '00:00' });
|
await wrapper.setProps({ modelValue: '00:00' });
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
wrapper.setProps({ value: '22:30' });
|
await wrapper.setProps({ modelValue: '22:30' });
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
|
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
|
expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00');
|
||||||
expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30');
|
expect(wrapper.emitted<[string]>('confirm')![1][0]).toEqual('22:30');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('change min-minute and emit correct value', async () => {
|
test('change min-minute and emit correct value', async () => {
|
||||||
const wrapper = mount(TimePicker, {
|
const wrapper = mount(TimePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: '12:00',
|
modelValue: '12:00',
|
||||||
minMinute: 0,
|
minMinute: 0,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
|
await wrapper.setProps({ minMinute: 30 });
|
||||||
wrapper.setProps({ minMinute: 30 });
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30');
|
expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('12:30');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('set max-hour & max-minute smaller than current then emit correct value', async () => {
|
test('set max-hour & max-minute smaller than current then emit correct value', async () => {
|
||||||
const wrapper = mount(TimePicker, {
|
const wrapper = mount(TimePicker, {
|
||||||
props: {
|
props: {
|
||||||
value: '23:59',
|
modelvalue: '23:59',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
wrapper.setProps({
|
await wrapper.setProps({
|
||||||
maxHour: 2,
|
maxHour: 2,
|
||||||
maxMinute: 2,
|
maxMinute: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
|
expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('set min-minute dynamically', async () => {
|
test('set min-minute dynamically', async () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
template: `
|
emits: ['change'],
|
||||||
<van-datetime-picker
|
setup(_, { emit }) {
|
||||||
v-model="currentTime"
|
const currentTime = ref('12:30');
|
||||||
type="time"
|
return () => (
|
||||||
:min-minute="currentTime.split(':')[0] > 12 ? 0 : 30"
|
<TimePicker
|
||||||
min-hour="12"
|
v-model={currentTime.value}
|
||||||
max-hour="13"
|
minMinute={Number(currentTime.value.split(':')[0]) > 12 ? 0 : 30}
|
||||||
@confirm="$emit('confirm', $event)"
|
minHour={12}
|
||||||
/>
|
maxHour={13}
|
||||||
`,
|
onChange={(value) => emit('change', value)}
|
||||||
data() {
|
/>
|
||||||
return {
|
);
|
||||||
currentTime: '12:30',
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||||
wrapper.find('.van-picker__confirm').trigger('click');
|
wrapper.find('.van-picker__confirm').trigger('click');
|
||||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00');
|
await later();
|
||||||
|
expect(wrapper.emitted<[string]>('change')![0][0]).toEqual('13:00');
|
||||||
});
|
});
|
||||||
@ -24,6 +24,13 @@ Use `name` prop to set icon name or icon URL.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<van-icon name="chat-o" />
|
<van-icon name="chat-o" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Using URL
|
||||||
|
|
||||||
|
You can directly passing an image URL to the `name` props.
|
||||||
|
|
||||||
|
```html
|
||||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -53,19 +60,12 @@ Use `color` prop to set icon color.
|
|||||||
Use `size` prop to set icon size.
|
Use `size` prop to set icon size.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
<!-- Using px unit by default -->
|
||||||
|
<van-icon name="chat-o" size="40" />
|
||||||
|
<!-- Using rem unit -->
|
||||||
|
<van-icon name="chat-o" size="3rem" />
|
||||||
```
|
```
|
||||||
|
|
||||||
### Use local font file
|
|
||||||
|
|
||||||
Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
|
|
||||||
|
|
||||||
```js
|
|
||||||
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
|
### Add custom iconfont
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@ -91,15 +91,15 @@ import 'vant/lib/icon/local.css';
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
| ------------ | ----------------------- | ------------------ | ---------- |
|
| ------------ | ------------------------ | ------------------ | ---------- |
|
||||||
| name | Icon name or URL | _string_ | `''` |
|
| name | Icon name or URL | _string_ | `''` |
|
||||||
| dot | Whether to show red dot | _boolean_ | `false` |
|
| dot | Whether to show red dot | _boolean_ | `false` |
|
||||||
| badge | Content of the badge | _number \| string_ | `''` |
|
| badge | Content of the badge | _number \| string_ | `''` |
|
||||||
| color | Icon color | _string_ | `inherit` |
|
| color | Icon color | _string_ | `inherit` |
|
||||||
| size | Icon size | _number \| string_ | `inherit` |
|
| size | Icon size | _number \| string_ | `inherit` |
|
||||||
| class-prefix | ClassName prefix | _string_ | `van-icon` |
|
| class-prefix | ClassName prefix | _string_ | `van-icon` |
|
||||||
| tag | HTML Tag | _string_ | `i` |
|
| tag | HTML Tag of root element | _string_ | `i` |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|||||||
@ -20,10 +20,17 @@ app.use(Icon);
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。
|
通过 `name` 属性来指定需要使用的图标，Vant 内置了一套图标库（见右侧示例），可以直接传入对应的名称来使用。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-icon name="chat-o" />
|
<van-icon name="chat-o" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用图片 URL
|
||||||
|
|
||||||
|
你也可以直接在 `name` 属性中传入一个图片 URL 来作为图标。
|
||||||
|
|
||||||
|
```html
|
||||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -39,7 +46,7 @@ app.use(Icon);
|
|||||||
|
|
||||||
### 图标颜色
|
### 图标颜色
|
||||||
|
|
||||||
`Icon` 的 `color` 属性用来设置图标的颜色。
|
通过 `color` 属性来设置图标的颜色。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-icon name="cart-o" color="#1989fa" />
|
<van-icon name="cart-o" color="#1989fa" />
|
||||||
@ -48,22 +55,15 @@ app.use(Icon);
|
|||||||
|
|
||||||
### 图标大小
|
### 图标大小
|
||||||
|
|
||||||
`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
|
通过 `size` 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
<!-- 不指定单位，默认使用 px -->
|
||||||
|
<van-icon name="chat-o" size="40" />
|
||||||
|
<!-- 指定使用 rem 单位 -->
|
||||||
|
<van-icon name="chat-o" size="3rem" />
|
||||||
```
|
```
|
||||||
|
|
||||||
### 使用本地字体文件
|
|
||||||
|
|
||||||
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置 `url-loader`。
|
|
||||||
|
|
||||||
```js
|
|
||||||
import 'vant/lib/icon/local.css';
|
|
||||||
```
|
|
||||||
|
|
||||||
> Tips: Vant 默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。
|
|
||||||
|
|
||||||
### 自定义图标
|
### 自定义图标
|
||||||
|
|
||||||
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
|
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
|
||||||
@ -101,7 +101,7 @@ import 'vant/lib/icon/local.css';
|
|||||||
| color | 图标颜色 | _string_ | `inherit` |
|
| color | 图标颜色 | _string_ | `inherit` |
|
||||||
| size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
|
| size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
|
||||||
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
|
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
|
||||||
| tag | HTML 标签 | _string_ | `i` |
|
| tag | 根节点对应的 HTML 标签名 | _string_ | `i` |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user