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
|
||||
```
|
||||
|
||||
Set babel config in .babelrc or babel-loader:
|
||||
Set babel config in .babelrc or babel.config.js:
|
||||
|
||||
```json
|
||||
// Note: Don't set libraryDirectory if you are using webpack 1.
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
@ -98,45 +97,56 @@ Set babel config in .babelrc or babel-loader:
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from vant:
|
||||
|
||||
```js
|
||||
// For users who use babel7, that can be configured in babel.config.js
|
||||
module.exports = {
|
||||
// Input
|
||||
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: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
'vant',
|
||||
],
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
Then you can import components from vant:
|
||||
### 3. Manually import
|
||||
|
||||
```js
|
||||
import { Button } from 'vant';
|
||||
import Button from 'vant/es/button';
|
||||
import 'vant/es/button/style';
|
||||
```
|
||||
|
||||
#### Vite Plugin
|
||||
|
||||
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
|
||||
### 4. Import all components
|
||||
|
||||
```js
|
||||
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
|
||||
# 安装插件
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
在.babelrc 中添加配置：
|
||||
在.babelrc 或 babel.config.js 中添加配置：
|
||||
|
||||
```json
|
||||
// 注意：webpack 1 无需设置 libraryDirectory
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
@ -119,48 +118,61 @@ npm i babel-plugin-import -D
|
||||
}
|
||||
```
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
|
||||
|
||||
```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: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true,
|
||||
},
|
||||
'vant',
|
||||
],
|
||||
vue(),
|
||||
styleImport({
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `vant/es/${name}/style`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件：
|
||||
### 方式三. 手动按需引入组件
|
||||
|
||||
在不使用插件的情况下，可以手动引入需要使用的组件和样式。
|
||||
|
||||
```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 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
|
||||
|
||||
|
||||
@ -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 { mount, later, triggerDrag } from '../../../test';
|
||||
|
||||
function filter(type, options) {
|
||||
function filter(type: string, options: string[]): string[] {
|
||||
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}`;
|
||||
}
|
||||
|
||||
test('filter prop', () => {
|
||||
test('filter prop', async () => {
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
filter,
|
||||
minDate: new Date(2020, 0, 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,
|
||||
minDate: new Date(2010, 0, 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');
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
|
||||
expect((wrapper.vm as Record<string, any>).getPicker().getValues()).toEqual([
|
||||
'2020 year',
|
||||
'05 month',
|
||||
'05 day',
|
||||
@ -54,89 +54,93 @@ test('confirm event', () => {
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
value: date,
|
||||
modelValue: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
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 wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
type: 'year-month',
|
||||
value: date,
|
||||
modelValue: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
|
||||
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);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![2][0].getFullYear()).toEqual(2025);
|
||||
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 wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
type: 'month-day',
|
||||
value: date,
|
||||
modelValue: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
|
||||
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);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31);
|
||||
});
|
||||
|
||||
test('datehour type', async () => {
|
||||
test('datehour type', () => {
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
minDate: new Date(2010, 0, 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');
|
||||
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);
|
||||
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', () => {
|
||||
@ -150,42 +154,42 @@ test('max-date prop', () => {
|
||||
const maxDate = new Date(2010, 5, 0, 0, 0);
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
value: new Date(2020, 10, 30, 30, 30),
|
||||
modelValue: new Date(2020, 10, 30, 30, 30),
|
||||
maxDate,
|
||||
},
|
||||
});
|
||||
|
||||
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', () => {
|
||||
const minDate = new Date(2030, 0, 0, 0, 0);
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
value: new Date(2020, 0, 0, 0, 0),
|
||||
modelValue: new Date(2020, 0, 0, 0, 0),
|
||||
minDate,
|
||||
},
|
||||
});
|
||||
|
||||
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, {
|
||||
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.setProps({ value: new Date(2025, 1, 1) });
|
||||
await wrapper.setProps({ modelValue: new Date(2025, 1, 1) });
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
|
||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2019);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
|
||||
});
|
||||
|
||||
test('use min-date with filter', async () => {
|
||||
@ -196,10 +200,10 @@ test('use min-date with filter', async () => {
|
||||
props: {
|
||||
minDate,
|
||||
maxDate,
|
||||
value: new Date(2020, 0, 0, 0, 0),
|
||||
filter(type, values) {
|
||||
modelValue: new Date(2020, 0, 0, 0, 0),
|
||||
filter(type: string, values: string[]) {
|
||||
if (type === 'minute') {
|
||||
return values.filter((value) => value % 30 === 0);
|
||||
return values.filter((value) => Number(value) % 30 === 0);
|
||||
}
|
||||
|
||||
return values;
|
||||
@ -208,7 +212,9 @@ test('use min-date with filter', async () => {
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
|
||||
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 wrapper = mount(DatetimePicker, {
|
||||
listeners: {
|
||||
confirm: onConfirm,
|
||||
cancel: onCancel,
|
||||
props: {
|
||||
onConfirm,
|
||||
onCancel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -33,18 +33,19 @@ test('time type', () => {
|
||||
|
||||
test('getPicker method', () => {
|
||||
const wrapper = mount(DatetimePicker);
|
||||
|
||||
expect(wrapper.vm.getPicker()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should render title slot correctly', () => {
|
||||
const wrapper = mount(DatetimePicker, {
|
||||
propsData: {
|
||||
props: {
|
||||
showToolbar: true,
|
||||
},
|
||||
scopedSlots: {
|
||||
slots: {
|
||||
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 DatePicker from "../DatePicker"
|
||||
import { later, mount, triggerDrag } from '../../../test';
|
||||
import DatePicker from '../DatePicker';
|
||||
|
||||
test('month-day type', async () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
@ -15,20 +15,20 @@ test('month-day type', async () => {
|
||||
|
||||
await later();
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1);
|
||||
|
||||
await later();
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1);
|
||||
|
||||
await later();
|
||||
triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31);
|
||||
});
|
||||
|
||||
test('v-model', async () => {
|
||||
@ -37,12 +37,12 @@ test('v-model', async () => {
|
||||
const wrapper = mount(DatePicker, {
|
||||
props: {
|
||||
minDate,
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
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 () => {
|
||||
@ -55,5 +55,5 @@ test('value has an inital value', async () => {
|
||||
|
||||
await later();
|
||||
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 { 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;
|
||||
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}`;
|
||||
}
|
||||
|
||||
@ -24,7 +25,7 @@ test('format initial value', () => {
|
||||
test('max-hour & max-minute', () => {
|
||||
const wrapper = mount(TimePicker, {
|
||||
props: {
|
||||
value: '23:59',
|
||||
modelValue: '23:59',
|
||||
maxHour: 2,
|
||||
maxMinute: 2,
|
||||
},
|
||||
@ -37,7 +38,7 @@ test('filter prop', () => {
|
||||
const wrapper = mount(TimePicker, {
|
||||
props: {
|
||||
filter,
|
||||
value: '12:00',
|
||||
modelValue: '12:00',
|
||||
},
|
||||
});
|
||||
|
||||
@ -49,7 +50,7 @@ test('formatter prop', async () => {
|
||||
props: {
|
||||
filter,
|
||||
formatter,
|
||||
value: '12:00',
|
||||
modelValue: '12:00',
|
||||
},
|
||||
});
|
||||
|
||||
@ -59,7 +60,7 @@ test('formatter prop', async () => {
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
|
||||
expect((wrapper.vm as Record<string, any>).getPicker().getValues()).toEqual([
|
||||
'20 hour',
|
||||
'00 minute',
|
||||
]);
|
||||
@ -68,13 +69,13 @@ test('formatter prop', async () => {
|
||||
test('confirm event', () => {
|
||||
const wrapper = mount(TimePicker, {
|
||||
props: {
|
||||
value: '12:00',
|
||||
modelValue: '12:00',
|
||||
},
|
||||
});
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
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', () => {
|
||||
@ -84,69 +85,68 @@ test('cancel event', () => {
|
||||
expect(wrapper.emitted('cancel')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('dynamic set value', () => {
|
||||
test('dynamic set value', async () => {
|
||||
const wrapper = mount(TimePicker);
|
||||
|
||||
wrapper.setProps({ value: '00:00' });
|
||||
await wrapper.setProps({ modelValue: '00:00' });
|
||||
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');
|
||||
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
|
||||
expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30');
|
||||
expect(wrapper.emitted<[string]>('confirm')![0][0]).toEqual('00:00');
|
||||
expect(wrapper.emitted<[string]>('confirm')![1][0]).toEqual('22:30');
|
||||
});
|
||||
|
||||
test('change min-minute and emit correct value', async () => {
|
||||
const wrapper = mount(TimePicker, {
|
||||
props: {
|
||||
value: '12:00',
|
||||
modelValue: '12:00',
|
||||
minMinute: 0,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.setProps({ minMinute: 30 });
|
||||
await wrapper.setProps({ minMinute: 30 });
|
||||
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 () => {
|
||||
const wrapper = mount(TimePicker, {
|
||||
props: {
|
||||
value: '23:59',
|
||||
modelvalue: '23:59',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
wrapper.setProps({
|
||||
await wrapper.setProps({
|
||||
maxHour: 2,
|
||||
maxMinute: 2,
|
||||
});
|
||||
|
||||
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 () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
:min-minute="currentTime.split(':')[0] > 12 ? 0 : 30"
|
||||
min-hour="12"
|
||||
max-hour="13"
|
||||
@confirm="$emit('confirm', $event)"
|
||||
/>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
currentTime: '12:30',
|
||||
};
|
||||
emits: ['change'],
|
||||
setup(_, { emit }) {
|
||||
const currentTime = ref('12:30');
|
||||
return () => (
|
||||
<TimePicker
|
||||
v-model={currentTime.value}
|
||||
minMinute={Number(currentTime.value.split(':')[0]) > 12 ? 0 : 30}
|
||||
minHour={12}
|
||||
maxHour={13}
|
||||
onChange={(value) => emit('change', value)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
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
|
||||
<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" />
|
||||
```
|
||||
|
||||
@ -53,19 +60,12 @@ Use `color` prop to set icon color.
|
||||
Use `size` prop to set icon size.
|
||||
|
||||
```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
|
||||
|
||||
```css
|
||||
@ -91,15 +91,15 @@ import 'vant/lib/icon/local.css';
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| ------------ | ----------------------- | ------------------ | ---------- |
|
||||
| name | Icon name or URL | _string_ | `''` |
|
||||
| dot | Whether to show red dot | _boolean_ | `false` |
|
||||
| badge | Content of the badge | _number \| string_ | `''` |
|
||||
| color | Icon color | _string_ | `inherit` |
|
||||
| size | Icon size | _number \| string_ | `inherit` |
|
||||
| class-prefix | ClassName prefix | _string_ | `van-icon` |
|
||||
| tag | HTML Tag | _string_ | `i` |
|
||||
| Attribute | Description | Type | Default |
|
||||
| ------------ | ------------------------ | ------------------ | ---------- |
|
||||
| name | Icon name or URL | _string_ | `''` |
|
||||
| dot | Whether to show red dot | _boolean_ | `false` |
|
||||
| badge | Content of the badge | _number \| string_ | `''` |
|
||||
| color | Icon color | _string_ | `inherit` |
|
||||
| size | Icon size | _number \| string_ | `inherit` |
|
||||
| class-prefix | ClassName prefix | _string_ | `van-icon` |
|
||||
| tag | HTML Tag of root element | _string_ | `i` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -20,10 +20,17 @@ app.use(Icon);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。
|
||||
通过 `name` 属性来指定需要使用的图标，Vant 内置了一套图标库（见右侧示例），可以直接传入对应的名称来使用。
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" />
|
||||
```
|
||||
|
||||
### 使用图片 URL
|
||||
|
||||
你也可以直接在 `name` 属性中传入一个图片 URL 来作为图标。
|
||||
|
||||
```html
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
@ -39,7 +46,7 @@ app.use(Icon);
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon` 的 `color` 属性用来设置图标的颜色。
|
||||
通过 `color` 属性来设置图标的颜色。
|
||||
|
||||
```html
|
||||
<van-icon name="cart-o" color="#1989fa" />
|
||||
@ -48,22 +55,15 @@ app.use(Icon);
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
|
||||
通过 `size` 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。
|
||||
|
||||
```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 组件中直接使用。
|
||||
@ -101,7 +101,7 @@ import 'vant/lib/icon/local.css';
|
||||
| color | 图标颜色 | _string_ | `inherit` |
|
||||
| size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
|
||||
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
|
||||
| tag | HTML 标签 | _string_ | `i` |
|
||||
| tag | 根节点对应的 HTML 标签名 | _string_ | `i` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user