+
+**Feature**
+
+- Form: 新增 show-error 属性，用于控制展示错误提示 [#5941](https://github.com/youzan/vant/issues/5941)
+- Tabbar: 新增 placeholder 属性，用于在吸底时生成占位元素 [#5979](https://github.com/youzan/vant/issues/5979)
+- Sku: 默认开启底部安全区适配 [#5960](https://github.com/youzan/vant/issues/5960)
+- SubmitBar: 默认开启底部安全区适配 [#5956](https://github.com/youzan/vant/issues/5956)
+- GoodsAction: 默认开启底部安全区适配 [#5955](https://github.com/youzan/vant/issues/5955)
+- Tabbar: 固定在底部时默认开启底部安全区适配 [#5968](https://github.com/youzan/vant/issues/5968)
+- Swipe: 允许一次滚动多页轮播 [#5953](https://github.com/youzan/vant/issues/5953)
+- Calendar: 设置 max-range 后，选择超出范围时会自动选择到最大范围 [#5992](https://github.com/youzan/vant/issues/5992)
+
+**Improvement**
+
+- NavBar: 优化点击反馈效果 [#5949](https://github.com/youzan/vant/issues/5949)
+- Popup: 优化退场动画效果 [#5954](https://github.com/youzan/vant/issues/5954)
+- Picker: 优化惯性滑动速率 [#5951](https://github.com/youzan/vant/issues/5951)
+- Swipe: 优化滚动手势体验，滑动较慢时会回弹到原位置 [#6003](https://github.com/youzan/vant/issues/6003)
+- TreeSelect: 更新左侧栏背景色，增强区分度 [#5991](https://github.com/youzan/vant/issues/5991)
+
+**Bug Fixes**
+
+- Button: 修复 icon-prefix 属性不生效的问题 [#5947](https://github.com/youzan/vant/issues/5947)
+- Calendar: 修复 keep-alive 时可能出现渲染空白的问题 [#5978](https://github.com/youzan/vant/issues/5978)
+- Form: 修复动态插入 Field 时校验顺序错误的问题 [b8dea3](https://github.com/youzan/vant/commit/b8dea3c13b7dbf6533169653c493a3156c07f1d4)
+- NavBar: 修复图标在部分机型上不居中的问题 [#5948](https://github.com/youzan/vant/issues/5948)
+- Stepper: 修复 disable-input 属性在低版本 safari 上不生效的问题 [#5976](https://github.com/youzan/vant/issues/5976)
+
+### [v2.5.9](https://github.com/youzan/vant/compare/v2.5.8...v2.5.9)
+
+`2020-03-31`
+
+**Feature**
+
+- AddressEdit: 新增 click-area 事件 [#5939](https://github.com/youzan/vant/issues/5939)
+- NavBar: 新增 placeholder 属性 [#5938](https://github.com/youzan/vant/issues/5938)
+- Steps: 新增 click-step 事件 [#5937](https://github.com/youzan/vant/issues/5937)
+
+**Bug Fixes**
+
+- NumberKeyboard: 修复 show-delete-key 属性不生效的问题 [#5935](https://github.com/youzan/vant/issues/5935)
+- Toast: 修复在部分机型上高度错误的问题 [#5931](https://github.com/youzan/vant/issues/5931)
+- Sticky: 修复 SSR 时访问 window 对象导致报错的问题 [#5958](https://github.com/youzan/vant/issues/5958)
+
+### [v2.5.8](https://github.com/youzan/vant/compare/v2.5.7...v2.5.8)
+
+`2020-03-27`
+
+**Feature**
+
+- 新增 Webstorm 的 web-types.json 定义文件，提供智能提示 [#5900](https://github.com/youzan/vant/issues/5900)
+- Form: 新增 show-error-message 属性 [#5927](https://github.com/youzan/vant/issues/5927)
+- ImagePreview: 开启延迟渲染，提高渲染性能 [#5879](https://github.com/youzan/vant/issues/5879)
+- Swipe: 新增 lazy-render 属性 [365f2b](https://github.com/youzan/vant/commit/365f2b16f7d9592f92413e206439585468a8a1c7)
+
+**Improvement**
+
+- Circle: 优化文字边距 [10f32d](https://github.com/youzan/vant/commit/10f32d6619199e99ff743cb5425db1e54e495fd0)
+- Sidebar: 新增 overflow-y: auto 样式 [#5921](https://github.com/youzan/vant/issues/5921)
+- Swipe: 调整为 flex 布局 [f701de](https://github.com/youzan/vant/commit/f701de9e58db5f88a582e3277c97a0c9ca99eec4)
+
+**Bug Fixes**
+
+- Calendar: 修复 multiple 模式下 default-date 格式错误的问题 [#5907](https://github.com/youzan/vant/issues/5907)
+- PullRefresh: 修复内部元素高度未填满容器的问题 [#5878](https://github.com/youzan/vant/issues/5878)
+- Sticky: 修复切换显示状态时可能出现定位错误的问题 [#5888](https://github.com/youzan/vant/issues/5888)
+- Swipe: 修复屏幕 resize 后可能导致轮播位置错误的问题 [#5922](https://github.com/youzan/vant/issues/5922)
+
+### [v2.5.7](https://github.com/youzan/vant/compare/v2.5.6...v2.5.7)
+
+`2020-03-20`
+
+**Bug Fixes**
+
+- Locale: 修复日语配置文件命名错误的问题 [e8c88a](https://github.com/youzan/vant/commit/e8c88a380217eb48cef8aa7dc29d378a1031120a)
+
+### [v2.5.6](https://github.com/youzan/vant/compare/v2.5.5...v2.5.6)
+
+`2020-03-20`
+
+**Feature**
+
+- Calendar: 新增 allow-same-day 属性 [#5688](https://github.com/youzan/vant/issues/5688)
+- GoodsAction: 新增 badge 属性 [0dea9e](https://github.com/youzan/vant/commit/0dea9e2cb1562decc07ef4467d085247b91924fd)
+- GridItem: 新增 badge 属性 [db94b2](https://github.com/youzan/vant/commit/db94b20c8258ebb31bac99ea1f0c918d62de1059)
+- Icon: 新增 badge 属性 [575577](https://github.com/youzan/vant/commit/575577ed58a1e6daa36ffba7db8054556aa0d24d)
+- ImagePreview: 新增 closed 事件 [5b279a](https://github.com/youzan/vant/commit/5b279ab0dc862c0a3257d18fe17d04ed8dd8c1dd)
+- locale: 新增日语配置文件 [#5853](https://github.com/youzan/vant/issues/5853) [#5854](https://github.com/youzan/vant/issues/5854)
+- SidebarItem: 新增 badge 属性 [01482f](https://github.com/youzan/vant/commit/01482f20bc2150a7e4667fac062b4f129b0ac0c1)
+- Tab: 新增 badge 属性 [214b13](https://github.com/youzan/vant/commit/214b13b8fff411a401fe6ccfc9eb979a51df7461)
+- TabbarItem: 新增 badge 属性 [d61cbd](https://github.com/youzan/vant/commit/d61cbdd086c9050fa467803be676a1eb14d50f16)
+- TreeSelect: 新增 badge 选项 [0cc7a3](https://github.com/youzan/vant/commit/0cc7a305287f43314910f893092c09004cef5349)
+- Uploader: 新增 chooseFile 方法 [#5818](https://github.com/youzan/vant/issues/5818)
+- Uploader: 新增 show-upload 属性 [66c0b3](https://github.com/youzan/vant/commit/66c0b3c1b7d101f242071cf90e5c0b2b899edbdd)
+- Uploader: 支持在 before-read 中返回修改后的文件对象 [#5813](https://github.com/youzan/vant/issues/5813)
+
+**Bug Fixes**
+
+- Calendar: 修复在 Form 内使用时错误触发表单提交的问题 [#5873](https://github.com/youzan/vant/issues/5873)
+- Field: 修复通过插槽使用 Uploader 时上传图片未展示的问题 [#5868](https://github.com/youzan/vant/issues/5868)
+- ImagePreview: 修复上次调用结果未清除的问题 [7fcfc5](https://github.com/youzan/vant/commit/7fcfc5f3270d3507a002247c53a29da211f1ecb6)
+- Picker: 修复 setValues、setIndexes 等方法未触发多列联动更新的问题 [#5807](https://github.com/youzan/vant/issues/5807)
+- Toast: 修复设置 forbidClick 后未锁定滚动的问题 [df8777](https://github.com/youzan/vant/commit/df877751b3497eb6477797ee1a52933067e57676)
+
+### [v2.5.5](https://github.com/youzan/vant/compare/v2.5.4...v2.5.5)
+
+`2020-03-11`
+
+**Feature**
+
+- Calendar: 新增 show-title 属性 [#5779](https://github.com/youzan/vant/issues/5779)
+- Calendar: 新增 show-subtitle 属性 [#5779](https://github.com/youzan/vant/issues/5779)
+- Field: 优化虚拟键盘，type="number" 调起数字键盘 [e89baa](https://github.com/youzan/vant/commit/e89baa12ae24dbd27466bd6ec694074ab99acf5d)
+- Stepper: 优化虚拟键盘，调起数字键盘 [58e74a](https://github.com/youzan/vant/commit/58e74a9e8bfc36f69103c6a301170c5f6ada03dd)
+- GoodsActionIcon: 新增 dot 属性 [b983ac](https://github.com/youzan/vant/commit/b983ac08919056e1095767d1deb3f78e5274b41c)
+
+**Bug Fixes**
+
+- AddressEdit: 修复 showDetail 为 false 时仍然会校验地址的问题 [#5803](https://github.com/youzan/vant/issues/5803)
+- Calendar: 修复在 multiple 模式下 color 属性不生效的问题 [#5786](https://github.com/youzan/vant/issues/5786)
+- Field: 修复 button 插槽可能导致表单校验失败的问题 [#5785](https://github.com/youzan/vant/issues/5785)
+- GoodsActionIcon: 修复使用 icon 插槽时 info 属性不生效的问题 [#5788](https://github.com/youzan/vant/issues/5788)
+- Stepper: 修复在 Form 中使用时必须输入整数的问题 [#5792](https://github.com/youzan/vant/issues/5792)
+- Sticky: 修复 Sticky 切换显隐导致位置错误的问题 [41e5c0](https://github.com/youzan/vant/commit/41e5c035dcf75c1f1d4c04673d3db255e439d452)
+
+### [v2.5.4](https://github.com/youzan/vant/compare/v2.5.3...v2.5.4)
+
+`2020-03-08`
+
+**Feature**
+
+- Calendar: 新增 multiple 类型 [#5705](https://github.com/youzan/vant/issues/5705)
+- Field: 输入框增加 `line-height: inherit` 样式 [#5737](https://github.com/youzan/vant/issues/5737)
+- Search: 新增 left 插槽 [#5771](https://github.com/youzan/vant/issues/5771)
+- Uploader: 新增 upload-icon 属性 [b3b46c](https://github.com/youzan/vant/commit/b3b46cde45f885b746a2a633e5fc0e87e1881abe)
+- Uploader: 圆角大小由 4px 调整为 8px [c67918](https://github.com/youzan/vant/commit/c6791841f4b06e699a684da0243526147438d852)
+- Uploader: 优化上传区域样式 [bd4e64](https://github.com/youzan/vant/commit/bd4e64190e63eea30c342ea5255d8603a70385f9)
+
+**Bug Fixes**
+
+- Calendar: 修复 poppable 为 false 无法自动定位到当前日期的问题 [#5760](https://github.com/youzan/vant/issues/5760)
+- DropdownMenu: 修复个别情况下 scrollIntoView 报错的问题 [#5770](https://github.com/youzan/vant/issues/5770)
+- Tabs: 修复 scrollspy 在自定义的滚动容器中无法跳转的问题 [0993b3](https://github.com/youzan/vant/commit/0993b394b16fdbf92bdf02d39090e631bba1f471)
+- Tabs: 修复 scrollspy 开启时在 safari 上可能出现标签弹回的问题 [#5727](https://github.com/youzan/vant/issues/5727)
+- TimePicker: 修复动态设置 min-date 时可能出现选中项错误的问题 [#5767](https://github.com/youzan/vant/issues/5767)
+
+**Types**
+
+- Form: 修复缺少 scrollToField 方法类型定义的问题 [df4439](https://github.com/youzan/vant/commit/df4439e9f6759a446b522652233703601093e99d)
+- ImagePreview: 修复缺少 closeable 选项类型定义的问题 [d5438d](https://github.com/youzan/vant/commit/d5438dfe0dc9df22e94881b57def33207eca44e6)
+- Toast: 修复缺少 iconPrefix 选项类型定义的问题 [3237e5](https://github.com/youzan/vant/commit/3237e56561e1b6b80ea3431f3b8a9f30f61d4b08)
+
### [v2.5.3](https://github.com/youzan/vant/compare/v2.5.2...v2.5.3)
`2020-02-28`
diff --git a/docs/markdown/home.en-US.md b/docs/markdown/home.en-US.md
index 0fd88be4e..3e710f5e7 100644
--- a/docs/markdown/home.en-US.md
+++ b/docs/markdown/home.en-US.md
@@ -8,14 +8,14 @@
### Features
-* 60+ Reusable components
-* 90% Unit test coverage
-* Extensive documentation and demos
-* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
-* Support Custom Theme
-* Support i18n
-* Support TS
-* Support SSR
+- 60+ Reusable components
+- 90% Unit test coverage
+- Extensive documentation and demos
+- Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+- Support Custom Theme
+- Support i18n
+- Support TS
+- Support SSR
### Quickstart
@@ -32,17 +32,17 @@ Modern browsers and Android 4.0+, iOS 8.0+.
### Ecosystem
| Project | Description |
-|-----|------|
+| --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
-| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Links
-* [Feedback](https://github.com/youzan/vant/issues)
-* [Changelog](#/en-US/changelog)
+- [Feedback](https://github.com/youzan/vant/issues)
+- [Changelog](#/en-US/changelog)
### LICENSE
diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md
index 5b161f26c..91b56a0d9 100644
--- a/docs/markdown/home.zh-CN.md
+++ b/docs/markdown/home.zh-CN.md
@@ -8,14 +8,14 @@
### 特性
-* 60+ 高质量组件
-* 90% 单元测试覆盖率
-* 完善的中英文文档和示例
-* 支持按需引入
-* 支持主题定制
-* 支持国际化
-* 支持 TS
-* 支持 SSR
+- 60+ 高质量组件
+- 90% 单元测试覆盖率
+- 完善的中英文文档和示例
+- 支持按需引入
+- 支持主题定制
+- 支持国际化
+- 支持 TS
+- 支持 SSR
### 快速上手
@@ -48,7 +48,7 @@
### 生态
| 项目 | 描述 |
-|-----|------|
+| --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
@@ -57,9 +57,9 @@
### 链接
-* [意见反馈](https://github.com/youzan/vant/issues)
-* [更新日志](#/zh-CN/changelog)
-* [码云镜像](https://gitee.com/organizations/vant-contrib)
+- [意见反馈](https://github.com/youzan/vant/issues)
+- [更新日志](#/zh-CN/changelog)
+- [码云镜像](https://gitee.com/organizations/vant-contrib)
### 开源协议
diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md
index 9c6ee6368..323bb918a 100644
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -78,7 +78,7 @@ import { Button } from 'vant';
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
```
-
+
### 3. Import all components
```js
@@ -97,17 +97,20 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
```html
-
+
-
+
-
+
```
@@ -149,15 +151,15 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
```js
module.exports = {
plugins: {
- 'autoprefixer': {
- browsers: ['Android >= 4.0', 'iOS >= 8']
+ autoprefixer: {
+ browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
- propList: ['*']
- }
- }
-}
+ propList: ['*'],
+ },
+ },
+};
```
> 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译
@@ -184,13 +186,16 @@ iPhone X 等机型底部存在底部指示条，指示条的操作区域与页
```html
-
+
+
-### build-site
+## 关于桌面端组件
-构建文档站点，在`site`目录生成可用于生产环境的文档站点代码
-
-### release
-
-发布组件库，发布前会自动执行 build 和 changelog 命令
-
-### changelog
-
-基于 commit 记录生成更新日志
-
-### commit-lint
-
-校验 commit message 的格式是否符合规范，需要配合`husky`在提交 commit 时触发
-
-## 配置
-
-参见[配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)。
-
-## 更新日志
-
-参见[更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)。
+目前 Vant Cli 仅支持移动端组件的预览，桌面端组件暂不支持预览（欢迎 PR）。
diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md
index fa52d725b..2d83ac219 100644
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@@ -1,37 +1,87 @@
# 更新日志
+### [v2.4.0]
+
+`2020-04-02`
+
+- 升级 prettier v2
+- 升级 html-webpack-plugin v4
+
+### [v2.3.1]
+
+`2020-03-29`
+
+- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
+
+### [v2.3.0]
+
+`2020-03-25`
+
+- build 命令支持编译 scoped 样式 ([#5910](https://github.com/youzan/vant/pull/5910))
+- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/youzan/vant/issues/5899))
+- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/youzan/vant/issues/5895))
+- 升级 @vant/markdown-vetur 2.0.0
+
+### [v2.2.8]
+
+`2020-03-20`
+
+- 修复构建 changelog 可能失败的问题
+
+### [v2.2.7]
+
+`2020-03-19`
+
+- 新增 process.env.VANT_CLI_VERSION 环境变量
+
+### [v2.2.6]
+
+`2020-03-18`
+
+- 升级 commander 5
+- 修复右侧预览 iframe 链接可能错误的问题
+
+### [v2.2.5]
+
+`2020-03-08`
+
+- 升级依赖
+- 优化代码块与底部文字之间的间距
+- 修复 create-vant-cli-app 初始化时报错的问题
+
### [v2.2.4]
+
`2020-02-14`
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
-
### [v2.2.3]
+
`2020-02-13`
- 链接颜色调整为蓝色
-
### [v2.2.2]
+
`2020-02-05`
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
-
### [v2.2.1]
+
`2020-02-04`
- 升级 babel@7.8
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
-
### [v2.2.0]
+
`2020-01-19`
- 升级 @vant/eslint-config@2.0.0
-
### [v2.1.8]
+
`2020-01-18`
- 新增 create-vant-cli-app 初始化命令
@@ -39,15 +89,15 @@
- 优化站点导航栏颜色
- 优化站点代码块颜色
-
### [v2.1.7]
+
`2020-01-15`
-- 优化 help 命令
+- 优化 help 命令
- 优化控制台输出信息
-
### [v2.1.6]
+
`2020-01-12`
- 支持自定义 Postcss 配置
@@ -55,23 +105,23 @@
- 优化文档站点的 meta 字段
- 新增 API 文档中的版本标签样式
-
### [v2.1.5]
+
`2020-01-10`
- 修复编译时未替换 import 语句中的 CSS 后缀的问题
- 升级 husky 版本到 4.0
-
### [v2.1.4]
+
`2020-01-06`
**Bug Fixes**
- 锁死 @vue/test-utils 版本为 1.0.0-beta.29
-
### [v2.1.3]
+
`2020-01-06`
**Feature**
@@ -79,8 +129,8 @@
- 增加 cache-loader，提高构建速度
- 调整 jest setup 文件执行时机，延迟至 env 初始化后执行
-
### [v2.1.2]
+
`2020-01-05`
**Feature**
diff --git a/packages/vant-cli/docs/commands.md b/packages/vant-cli/docs/commands.md
new file mode 100644
index 000000000..d5e0bdfb3
--- /dev/null
+++ b/packages/vant-cli/docs/commands.md
@@ -0,0 +1,61 @@
+# 命令
+
+Vant Cli 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
+
+```json
+// package.json
+{
+ "scripts": {
+ "dev": "vant-cli dev",
+ "test": "vant-cli test",
+ "lint": "vant-cli lint",
+ "release": "vant-cli release",
+ "build-site": "vant-cli build-site"
+ }
+}
+```
+
+也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令：
+
+```bash
+npx vant-cli dev
+```
+
+### dev
+
+运行本地开发环境。
+
+运行 dev 命令时，Vant Cli 会通过 [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
+
+### build
+
+构建组件库。
+
+运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)。
+
+发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
+
+```json
+// package.json
+{
+ "main": "lib/index.js",
+ "module": "es/index.js",
+ "files": ["es", "lib"]
+}
+```
+
+### build-site
+
+构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。
+
+### release
+
+发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。
+
+## changelog
+
+基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。
+
+## commit-lint
+
+校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。
diff --git a/packages/vant-cli/docs/directory.md b/packages/vant-cli/docs/directory.md
new file mode 100644
index 000000000..66405fe55
--- /dev/null
+++ b/packages/vant-cli/docs/directory.md
@@ -0,0 +1,81 @@
+# 目录结构
+
+## 源代码目录
+
+基于 Vant Cli 搭建的组件库的基本目录结构如下所示：
+
+```
+project
+├─ src # 组件源代码
+│ ├─ button # button 组件源代码
+│ └─ dialog # dialog 组件源代码
+│
+├─ docs # 静态文档目录
+│ ├─ home.md # 文档首页
+│ └─ changelog.md # 更新日志
+│
+├─ babel.config.js # Babel 配置文件
+├─ vant.config.js # Vant Cli 配置文件
+├─ pacakge.json
+└─ README.md
+```
+
+单个组件的目录如下：
+
+```
+button
+├─ demo # 示例目录
+│ └─ index.vue # 组件示例
+├─ index.vue # 组件源码
+└─ README.md # 组件文档
+```
+
+使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。
+
+如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：
+
+```
+button
+├─ demo # 组件示例
+│ └─ index.vue # 组件示例入口
+├─ index.js # 组件入口
+├─ index.less # 组件样式，可以为 less 或 scss
+└─ README.md # 组件文档
+```
+
+采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
+
+通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
+
+## 构建结果目录
+
+运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下：
+
+```
+project
+├─ es # es 目录下的代码遵循 esmodule 规范
+│ ├─ button # button 组件编译后的代码目录
+│ ├─ dialog # dialog 组件编译后的代码目录
+│ └─ index.js # 引入所有组件的入口，支持 tree shaking
+│
+└─ lib # lib 目录下的代码遵循 commonjs 规范
+ ├─ button # button 组件编译后的代码目录
+ ├─ dialog # dialog 组件编译后的代码目录
+ ├─ index.js # 引入所有组件的入口
+ ├─ index.less # 所有组件未编译的样式
+ ├─ index.css # 所有组件打包后的样式，用于 CDN 引入
+ ├─ name.js # 所有组件打包后的脚本，未压缩，用于 CDN 引入
+ └─ name.min.js # 所有组件打包后的脚本，已压缩，用于 CDN 引入
+```
+
+单个组件编译后的目录如下：
+
+```
+button
+├─ index.js # 组件编译后的 JS 文件
+├─ index.css # 组件编译后的 CSS 文件
+├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss
+└─ style # 按需引入样式的入口
+ ├─ index.js # 按需引入编译后的样式
+ └─ less.js # 按需引入未编译的样式，可用于主题定制
+```
diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json
index c0d84a957..dd75cedc1 100644
--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@vant/cli",
- "version": "2.2.4",
+ "version": "2.4.0",
"description": "",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
@@ -34,73 +34,71 @@
},
"devDependencies": {
"@types/fs-extra": "^8.1.0",
- "@types/html-webpack-plugin": "^3.2.2",
"@types/lodash": "^4.14.149",
"@types/postcss-load-config": "^2.0.1",
- "@types/sass": "^1.16.0",
- "@types/shelljs": "^0.8.6",
- "@types/webpack": "^4.41.6",
- "@types/webpack-dev-server": "^3.10.0",
+ "@types/webpack": "^4.41.10",
+ "@types/webpack-dev-server": "^3.10.1",
"@types/webpack-merge": "^4.1.5"
},
"dependencies": {
- "@babel/core": "^7.8.4",
+ "@babel/core": "^7.9.0",
"@babel/plugin-syntax-jsx": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.8.3",
- "@babel/plugin-transform-runtime": "^7.8.3",
- "@babel/preset-env": "^7.8.4",
- "@babel/preset-typescript": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.9.0",
+ "@babel/preset-env": "^7.9.5",
+ "@babel/preset-typescript": "^7.9.0",
"@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
- "@types/jest": "^25.1.3",
+ "@types/jest": "^25.2.1",
"@vant/eslint-config": "^2.0.0",
"@vant/markdown-loader": "^2.3.0",
- "@vant/markdown-vetur": "^1.1.0",
- "@vant/stylelint-config": "^1.1.0",
+ "@vant/markdown-vetur": "^2.0.1",
+ "@vant/stylelint-config": "^1.3.0",
"@vant/touch-emulator": "^1.2.0",
"@vue/babel-preset-jsx": "^1.1.2",
- "@vue/component-compiler-utils": "^3.1.1",
+ "@vue/component-compiler-utils": "^3.1.2",
"@vue/test-utils": "1.0.0-beta.29",
"address": "^1.1.2",
- "autoprefixer": "^9.7.4",
- "babel-jest": "^25.1.0",
- "babel-loader": "^8.0.6",
+ "autoprefixer": "^9.7.6",
+ "babel-jest": "^25.3.0",
+ "babel-loader": "^8.1.0",
"babel-plugin-import": "^1.13.0",
"cache-loader": "^4.1.0",
"chokidar": "^3.3.1",
"clean-css": "^4.2.3",
"codecov": "^3.6.5",
- "commander": "^4.1.1",
+ "commander": "^5.0.0",
"consola": "^2.11.3",
"conventional-changelog": "^3.1.18",
- "cross-env": "^7.0.0",
- "css-loader": "^3.4.2",
+ "cross-env": "^7.0.2",
+ "css-loader": "^3.5.2",
"eslint": "^6.8.0",
- "fast-glob": "^3.2.1",
- "gh-pages": "2.0.1",
- "html-webpack-plugin": "3.2.0",
- "husky": "^4.2.3",
- "jest": "^25.1.0",
+ "fast-glob": "^3.2.2",
+ "gh-pages": "^2.2.0",
+ "hash-sum": "^2.0.0",
+ "html-webpack-plugin": "4.2.0",
+ "husky": "^4.2.5",
+ "jest": "^25.3.0",
"jest-canvas-mock": "^2.2.0",
"jest-serializer-vue": "^2.0.2",
"less": "^3.11.1",
"less-loader": "^5.0.0",
- "lint-staged": "^10.0.7",
+ "lint-staged": "^10.1.3",
"lodash": "^4.17.15",
"ora": "^4.0.3",
"portfinder": "^1.0.25",
"postcss": "^7.0.27",
"postcss-loader": "^3.0.0",
- "release-it": "^12.6.0",
- "sass": "^1.25.0",
+ "prettier": "^2.0.4",
+ "release-it": "^13.5.2",
+ "sass": "^1.26.3",
"sass-loader": "^8.0.2",
- "shelljs": "^0.8.3",
"style-loader": "^1.1.3",
- "stylelint": "^13.2.0",
- "typescript": "^3.8.2",
+ "stylelint": "^13.3.1",
+ "typescript": "^3.8.3",
"vue-jest": "4.0.0-beta.2",
- "vue-loader": "^15.9.0",
- "vue-router": "^3.1.5",
- "webpack": "^4.41.6",
+ "vue-loader": "^15.9.1",
+ "vue-router": "^3.1.6",
+ "webpack": "^4.42.1",
"webpack-dev-server": "3.10.3",
"webpack-merge": "^4.2.2",
"webpackbar": "^4.0.0"
diff --git a/packages/vant-cli/site/common/style/highlight.less b/packages/vant-cli/site/common/style/highlight.less
index e0b25a2c8..07cf774c5 100644
--- a/packages/vant-cli/site/common/style/highlight.less
+++ b/packages/vant-cli/site/common/style/highlight.less
@@ -3,7 +3,6 @@
code {
position: relative;
display: block;
- margin-top: 20px;
overflow-x: auto;
color: @van-doc-code-color;
font-weight: 400;
@@ -16,7 +15,11 @@ code {
}
pre {
- margin: 0;
+ margin: 20px 0 0;
+
+ + p {
+ margin-top: 20px;
+ }
}
.hljs {
diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue
index b633671c8..6e7cbc46f 100644
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@@ -23,7 +23,7 @@ export default {
},
data() {
- const path = location.pathname.replace('/index', '/');
+ const path = location.pathname.replace(/\/index(\.html)?/, '/');
return {
packageVersion,
diff --git a/packages/vant-cli/site/desktop/components/Header.vue b/packages/vant-cli/site/desktop/components/Header.vue
index b987ac65d..95fd21cd9 100644
--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@@ -140,6 +140,7 @@ export default {
.van-doc-header {
width: 100%;
+ background-color: #001938;
user-select: none;
&__top {
@@ -148,7 +149,6 @@ export default {
height: @van-doc-header-top-height;
padding: 0 @van-doc-padding;
line-height: @van-doc-header-top-height;
- background-color: #001938;
&-nav {
flex: 1;
diff --git a/packages/vant-cli/site/desktop/components/index.vue b/packages/vant-cli/site/desktop/components/index.vue
index 09c069b6a..c087db09c 100644
--- a/packages/vant-cli/site/desktop/components/index.vue
+++ b/packages/vant-cli/site/desktop/components/index.vue
@@ -51,7 +51,7 @@ export default {
},
watch: {
- // eslint-disable-next-line
+ // eslint-disable-next-line object-shorthand
'$route.path'() {
this.setNav();
},
@@ -88,7 +88,7 @@ export default {
},
keyboardHandler() {
- window.addEventListener('keyup', event => {
+ window.addEventListener('keyup', (event) => {
switch (event.keyCode) {
case 37: // left
this.keyboardNav('prev');
diff --git a/packages/vant-cli/site/mobile/components/DemoNav.vue b/packages/vant-cli/site/mobile/components/DemoNav.vue
index 9cc7e9305..b5509c7e9 100644
--- a/packages/vant-cli/site/mobile/components/DemoNav.vue
+++ b/packages/vant-cli/site/mobile/components/DemoNav.vue
@@ -26,7 +26,11 @@ export default {
methods: {
onBack() {
- history.back();
+ if (history.length > 1) {
+ history.back();
+ } else {
+ this.$router.replace('/');
+ }
},
},
};
diff --git a/packages/vant-cli/src/commands/changelog.ts b/packages/vant-cli/src/commands/changelog.ts
index 5370fef87..3d5141b59 100644
--- a/packages/vant-cli/src/commands/changelog.ts
+++ b/packages/vant-cli/src/commands/changelog.ts
@@ -2,7 +2,6 @@ import { join } from 'path';
import { ROOT } from '../common/constant';
import { ora, slimPath } from '../common/logger';
import { createWriteStream, readFileSync } from 'fs-extra';
-// @ts-ignore
import conventionalChangelog from 'conventional-changelog';
const DIST_FILE = join(ROOT, './changelog.generated.md');
@@ -38,7 +37,7 @@ function transform(item: any) {
if (item.references.length) {
item.references.forEach((ref: any) => {
- if (ref.issue) {
+ if (ref.issue && item.subject) {
item.subject = item.subject.replace(` (#${ref.issue})`, '');
}
});
diff --git a/packages/vant-cli/src/commands/clean.ts b/packages/vant-cli/src/commands/clean.ts
index 080b15b54..cf71d54c0 100644
--- a/packages/vant-cli/src/commands/clean.ts
+++ b/packages/vant-cli/src/commands/clean.ts
@@ -1,11 +1,18 @@
-import { emptyDir } from 'fs-extra';
-import { ES_DIR, LIB_DIR, DIST_DIR, SITE_DIST_DIR } from '../common/constant';
+import { remove } from 'fs-extra';
+import {
+ ES_DIR,
+ LIB_DIR,
+ DIST_DIR,
+ VETUR_DIR,
+ SITE_DIST_DIR,
+} from '../common/constant';
export async function clean() {
await Promise.all([
- emptyDir(ES_DIR),
- emptyDir(LIB_DIR),
- emptyDir(DIST_DIR),
- emptyDir(SITE_DIST_DIR),
+ remove(ES_DIR),
+ remove(LIB_DIR),
+ remove(DIST_DIR),
+ remove(VETUR_DIR),
+ remove(SITE_DIST_DIR),
]);
}
diff --git a/packages/vant-cli/src/commands/lint.ts b/packages/vant-cli/src/commands/lint.ts
index 2f54a5098..ee1aacd2d 100644
--- a/packages/vant-cli/src/commands/lint.ts
+++ b/packages/vant-cli/src/commands/lint.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
import execa from 'execa';
import { ora } from '../common/logger';
import { SCRIPT_EXTS } from '../common/constant';
diff --git a/packages/vant-cli/src/commands/release.ts b/packages/vant-cli/src/commands/release.ts
index e6270ace3..32c3babd9 100644
--- a/packages/vant-cli/src/commands/release.ts
+++ b/packages/vant-cli/src/commands/release.ts
@@ -1,5 +1,4 @@
/* eslint-disable no-template-curly-in-string */
-// @ts-ignore
import releaseIt from 'release-it';
import { join } from 'path';
diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts
index 9cdc8d149..b266ec61a 100644
--- a/packages/vant-cli/src/common/constant.ts
+++ b/packages/vant-cli/src/common/constant.ts
@@ -23,6 +23,7 @@ export const ROOT = findRootDir(CWD);
export const ES_DIR = join(ROOT, 'es');
export const LIB_DIR = join(ROOT, 'lib');
export const DOCS_DIR = join(ROOT, 'docs');
+export const VETUR_DIR = join(ROOT, 'vetur');
export const SITE_DIST_DIR = join(ROOT, 'site');
export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
diff --git a/packages/vant-cli/src/common/manager.ts b/packages/vant-cli/src/common/manager.ts
index 22ea1be29..d055f5fb1 100644
--- a/packages/vant-cli/src/common/manager.ts
+++ b/packages/vant-cli/src/common/manager.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
import execa from 'execa';
import { consola } from './logger';
import { execSync } from 'child_process';
diff --git a/packages/vant-cli/src/compiler/compile-less.ts b/packages/vant-cli/src/compiler/compile-less.ts
index 1c548fc3f..3d71adb66 100644
--- a/packages/vant-cli/src/compiler/compile-less.ts
+++ b/packages/vant-cli/src/compiler/compile-less.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
import { render, FileManager } from 'less';
import { readFileSync } from 'fs-extra';
diff --git a/packages/vant-cli/src/compiler/compile-sfc.ts b/packages/vant-cli/src/compiler/compile-sfc.ts
index 1cb6badbd..0a162e3c9 100644
--- a/packages/vant-cli/src/compiler/compile-sfc.ts
+++ b/packages/vant-cli/src/compiler/compile-sfc.ts
@@ -1,5 +1,6 @@
import * as compiler from 'vue-template-compiler';
import * as compileUtils from '@vue/component-compiler-utils';
+import hash from 'hash-sum';
import { parse } from 'path';
import { remove, writeFileSync, readFileSync } from 'fs-extra';
import { replaceExt } from '../common';
@@ -34,6 +35,10 @@ function injectRender(script: string, render: string) {
);
}
+function injectScopeId(script: string, scopeId: string) {
+ return script.replace(EXPORT, `${EXPORT}\n _scopeId: '${scopeId}',\n\n`);
+}
+
function injectStyle(
script: string,
styles: compileUtils.SFCBlock[],
@@ -63,10 +68,6 @@ function compileTemplate(template: string) {
return result.code;
}
-type CompileSfcOptions = {
- skipStyle?: boolean;
-};
-
export function parseSfc(filePath: string) {
const source = readFileSync(filePath, 'utf-8');
@@ -79,15 +80,16 @@ export function parseSfc(filePath: string) {
return descriptor;
}
-export async function compileSfc(
- filePath: string,
- options: CompileSfcOptions = {}
-): Promise', '') : ''; - const type = td[2] ? td[2].replace(/\*/g, '') : ''; - const defaultVal = td[3] ? td[3].replace(/`/g, '') : ''; - - if (isProp) { - return `${desc}, 默认值: ${defaultVal}, 类型: ${type}`; - } - - return desc; -} - -export function codegen(artical: Artical) { - const tags: Record
{{ $t('content') }}
+ {{ t('content') }}
`range`表示选择日期区间 | *string* | `single` | -| title | 日历标题 | *string* | `日期选择` | -| color | 颜色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | -| min-date | 最小日期 | *Date* | 当前日期 | -| max-date | 最大日期 | *Date* | 当前日期的六个月后 | -| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | -| row-height | 日期行高 | *number \| string* | `64` | -| formatter | 日期格式化函数 | *(day: Day) => Day* | - | -| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` | -| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | -| round | 是否显示圆角弹窗 | *boolean* | `true` | -| show-mark | 是否显示月份背景水印 | *boolean* | `true` | -| show-confirm | 是否展示确认按钮 | *boolean* | `true` | -| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | -| confirm-text | 确认按钮的文字 | *string* | `确定` | -| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | -| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - | -| range-prompt `v2.4.3` | 选择超过区间范围时的提示文案 | *string* | `选择天数不能超过 xx 天` | -| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | +| --- | --- | --- | --- | +| type `v2.5.4` | 选择类型:
`single`表示选择单个日期，
`multiple`表示选择多个日期，
`range`表示选择日期区间 | _string_ | `single` | +| title | 日历标题 | _string_ | `日期选择` | +| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` | +| min-date | 可选择的最小日期 | _Date_ | 当前日期 | +| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 | +| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 | +| row-height | 日期行高 | _number \| string_ | `64` | +| formatter | 日期格式化函数 | _(day: Day) => Day_ | - | +| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` | +| show-mark | 是否显示月份背景水印 | _boolean_ | `true` | +| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` | +| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` | +| show-confirm | 是否展示确认按钮 | _boolean_ | `true` | +| confirm-text | 确认按钮的文字 | _string_ | `确定` | +| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` | + +### Poppable Props + +当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props: + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| v-model | 是否显示日历弹窗 | _boolean_ | `false` | +| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` | +| round | 是否显示圆角弹窗 | _boolean_ | `true` | +| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | + +### Range Props + +当 Canlendar 的 `type` 为 `range` 时，支持以下 props: + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - | +| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` | +| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` | ### Day 数据结构 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容 | 键名 | 说明 | 类型 | -|------|------|------| -| date | 日期对应的 Date 对象 | *Date* | -| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | *string* | -| text | 中间显示的文字 | *string* | -| topInfo | 上方的提示信息 | *string* | -| bottomInfo | 下方的提示信息 | *string* | -| className | 额外类名 | *string* | +| --- | --- | --- | +| date | 日期对应的 Date 对象 | _Date_ | +| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ | +| text | 中间显示的文字 | _string_ | +| topInfo | 上方的提示信息 | _string_ | +| bottomInfo | 下方的提示信息 | _string_ | +| className | 额外类名 | _string_ | ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| -| select | 点击任意日期时触发 | *value: Date \| Date[]* | -| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* | +| --- | --- | --- | +| select | 点击任意日期时触发 | _value: Date \| Date[]_ | +| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | | open `v2.5.2` | 打开弹出层时触发 | - | | close `v2.5.2` | 关闭弹出层时触发 | - | | opened `v2.5.2` | 打开弹出层且动画结束后触发 | - | @@ -260,18 +287,18 @@ export default { ### Slots -| 名称 | 说明 | -|------|------| -| title | 自定义标题 | +| 名称 | 说明 | +| ------ | ------------------ | +| title | 自定义标题 | | footer | 自定义底部区域内容 | ### 方法 通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| reset | 重置选中的日期到默认值 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | ---------------------- | ---- | ------ | +| reset | 重置选中的日期到默认值 | - | - | ## 常见问题 diff --git a/src/calendar/components/Header.js b/src/calendar/components/Header.js index 8e0ba74dc..f0ac16a95 100644 --- a/src/calendar/components/Header.js +++ b/src/calendar/components/Header.js @@ -6,17 +6,23 @@ const [createComponent] = createNamespace('calendar-header'); export default createComponent({ props: { title: String, - monthTitle: String, + subtitle: String, + showTitle: Boolean, + showSubtitle: Boolean, }, methods: { genTitle() { - const title = this.slots('title') || this.title || t('title'); - return
{title}
;
+ if (this.showTitle) {
+ const title = this.slots('title') || this.title || t('title');
+ return {title}
;
+ }
},
- genMonth() {
- return {this.monthTitle}
;
+ genSubtitle() {
+ if (this.showSubtitle) {
+ return {this.subtitle}
;
+ }
},
genWeekDays() {
@@ -24,7 +30,7 @@ export default createComponent({
return (
- {weekdays.map(item => (
+ {weekdays.map((item) => (
{item}
))}
@@ -36,7 +42,7 @@ export default createComponent({
return (
{this.genTitle()}
- {this.genMonth()}
+ {this.genSubtitle()}
{this.genWeekDays()}
);
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index e290df1a4..8c8d37952 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -1,5 +1,13 @@
import { createNamespace } from '../../utils';
-import { t, bem, compareDay, formatMonthTitle, ROW_HEIGHT } from '../utils';
+import {
+ t,
+ bem,
+ compareDay,
+ ROW_HEIGHT,
+ getPrevDay,
+ getNextDay,
+ formatMonthTitle,
+} from '../utils';
import { getMonthEndDay } from '../../datetime-picker/utils';
const [createComponent] = createNamespace('calendar-month');
@@ -12,10 +20,12 @@ export default createComponent({
minDate: Date,
maxDate: Date,
showMark: Boolean,
- showTitle: Boolean,
rowHeight: [Number, String],
formatter: Function,
currentDate: [Date, Array],
+ allowSameDay: Boolean,
+ showSubtitle: Boolean,
+ showMonthTitle: Boolean,
},
data() {
@@ -81,7 +91,67 @@ export default createComponent({
methods: {
scrollIntoView() {
- this.$refs.days.scrollIntoView();
+ if (this.showSubtitle) {
+ this.$refs.days.scrollIntoView();
+ } else {
+ this.$refs.month.scrollIntoView();
+ }
+ },
+
+ getMultipleDayType(day) {
+ const isSelected = (date) =>
+ this.currentDate.some((item) => compareDay(item, date) === 0);
+
+ if (isSelected(day)) {
+ const prevDay = getPrevDay(day);
+ const nextDay = getNextDay(day);
+ const prevSelected = isSelected(prevDay);
+ const nextSelected = isSelected(nextDay);
+
+ if (prevSelected && nextSelected) {
+ return 'multiple-middle';
+ }
+
+ if (prevSelected) {
+ return 'end';
+ }
+
+ return nextSelected ? 'start' : 'multiple-selected';
+ }
+
+ return '';
+ },
+
+ getRangeDayType(day) {
+ const [startDay, endDay] = this.currentDate;
+
+ if (!startDay) {
+ return '';
+ }
+
+ const compareToStart = compareDay(day, startDay);
+
+ if (!endDay) {
+ return compareToStart === 0 ? 'start' : '';
+ }
+
+ const compareToEnd = compareDay(day, endDay);
+
+ if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
+ return 'start-end';
+ }
+
+ if (compareToStart === 0) {
+ return 'start';
+ }
+
+ if (compareToEnd === 0) {
+ return 'end';
+ }
+
+ if (compareToStart > 0 && compareToEnd < 0) {
+ return 'middle';
+ }
},
getDayType(day) {
@@ -95,41 +165,24 @@ export default createComponent({
return compareDay(day, currentDate) === 0 ? 'selected' : '';
}
+ if (type === 'multiple') {
+ return this.getMultipleDayType(day);
+ }
+
/* istanbul ignore else */
if (type === 'range') {
- const [startDay, endDay] = this.currentDate;
-
- if (!startDay) {
- return;
- }
-
- const compareToStart = compareDay(day, startDay);
- if (compareToStart === 0) {
- return 'start';
- }
-
- if (!endDay) {
- return;
- }
-
- const compareToEnd = compareDay(day, endDay);
- if (compareToEnd === 0) {
- return 'end';
- }
-
- if (compareToStart > 0 && compareToEnd < 0) {
- return 'middle';
- }
+ return this.getRangeDayType(day);
}
},
getBottomInfo(type) {
- if (type === 'start') {
- return t('start');
- }
-
- if (type === 'end') {
- return t('end');
+ if (this.type === 'range') {
+ if (type === 'start' || type === 'end') {
+ return t(type);
+ }
+ if (type === 'start-end') {
+ return t('startEnd');
+ }
}
},
@@ -145,7 +198,12 @@ export default createComponent({
}
if (this.color) {
- if (type === 'start' || type === 'end') {
+ if (
+ type === 'start' ||
+ type === 'end' ||
+ type === 'multiple-selected' ||
+ type === 'multiple-middle'
+ ) {
style.background = this.color;
} else if (type === 'middle') {
style.color = this.color;
@@ -156,7 +214,7 @@ export default createComponent({
},
genTitle() {
- if (this.showTitle) {
+ if (this.showMonthTitle) {
return {this.title}
;
}
},
@@ -203,7 +261,7 @@ export default createComponent({
role="gridcell"
style={style}
class={[bem('day'), item.className]}
- tabindex={disabled ? null : -1}
+ tabindex={-1}
onClick={onClick}
>
@@ -233,7 +291,7 @@ export default createComponent({
render() {
return (
-
diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap
index fe58c9c40..f8af63e92 100644
--- a/src/calendar/test/__snapshots__/index.spec.js.snap
+++ b/src/calendar/test/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`color prop when type is range 1`] = `
+
-
+
-
+
-
+
-
+
@@ -115,10 +123,12 @@ export default {
out: '离店',
today: '今天',
laborDay: '劳动节',
- youthDay: '五四青年节',
+ youthDay: '青年节',
calendar: '日历',
maxRange: '日期区间最大范围',
+ selectCount: (count) => `选择了 ${count} 个日期`,
selectSingle: '选择单个日期',
+ selectMultiple: '选择多个日期',
selectRange: '选择日期区间',
quickSelect: '快捷选择',
confirmText: '完成',
@@ -139,7 +149,9 @@ export default {
youthDay: 'Youth Day',
calendar: 'Calendar',
maxRange: 'Max Range',
+ selectCount: (count) => `${count} dates selected`,
selectSingle: 'Select Single Date',
+ selectMultiple: 'Select Multiple Date',
selectRange: 'Select Date Range',
quickSelect: 'Quick Select',
confirmText: 'OK',
@@ -160,6 +172,7 @@ export default {
maxRange: [],
selectSingle: null,
selectRange: [],
+ selectMultiple: [],
quickSelect1: null,
quickSelect2: [],
customColor: [],
@@ -214,8 +227,8 @@ export default {
this.color = GREEN;
break;
case 'customConfirm':
- this.confirmText = this.$t('confirmText');
- this.confirmDisabledText = this.$t('confirmDisabledText');
+ this.confirmText = this.t('confirmText');
+ this.confirmDisabledText = this.t('confirmDisabledText');
break;
case 'customRange':
this.minDate = new Date(2010, 0, 1);
@@ -242,18 +255,18 @@ export default {
if (month === 5) {
if (date === 1) {
- day.topInfo = this.$t('laborDay');
+ day.topInfo = this.t('laborDay');
} else if (date === 4) {
- day.topInfo = this.$t('youthDay');
+ day.topInfo = this.t('youthDay');
} else if (date === 11) {
- day.text = this.$t('today');
+ day.text = this.t('today');
}
}
if (day.type === 'start') {
- day.bottomInfo = this.$t('in');
+ day.bottomInfo = this.t('in');
} else if (day.type === 'end') {
- day.bottomInfo = this.$t('out');
+ day.bottomInfo = this.t('out');
}
return day;
@@ -271,6 +284,12 @@ export default {
}
},
+ formatMultiple(dates) {
+ if (dates.length) {
+ return this.t('selectCount', dates.length);
+ }
+ },
+
formatRange(dateRange) {
if (dateRange.length) {
const [start, end] = dateRange;
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 7cb06c4d5..48c906560 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -4,12 +4,14 @@ import { getScrollTop } from '../utils/dom/scroll';
import {
t,
bem,
+ copyDates,
getNextDay,
compareDay,
+ ROW_HEIGHT,
+ calcDateNum,
compareMonth,
createComponent,
- calcDateNum,
- ROW_HEIGHT,
+ getDayByOffset,
} from './utils';
// Components
@@ -29,6 +31,7 @@ export default createComponent({
rangePrompt: String,
defaultDate: [Date, Array],
getContainer: [String, Function],
+ allowSameDay: Boolean,
closeOnPopstate: Boolean,
confirmDisabledText: String,
type: {
@@ -68,10 +71,18 @@ export default createComponent({
type: Boolean,
default: true,
},
+ showTitle: {
+ type: Boolean,
+ default: true,
+ },
showConfirm: {
type: Boolean,
default: true,
},
+ showSubtitle: {
+ type: Boolean,
+ default: true,
+ },
safeAreaInsetBottom: {
type: Boolean,
default: true,
@@ -88,16 +99,12 @@ export default createComponent({
data() {
return {
- monthTitle: '',
+ subtitle: '',
currentDate: this.getInitialDate(),
};
},
computed: {
- range() {
- return this.type === 'range';
- },
-
months() {
const months = [];
const cursor = new Date(this.minDate);
@@ -113,23 +120,23 @@ export default createComponent({
},
buttonDisabled() {
- if (this.range) {
- return !this.currentDate[0] || !this.currentDate[1];
+ const { type, currentDate } = this;
+
+ if (type === 'range') {
+ return !currentDate[0] || !currentDate[1];
}
- return !this.currentDate;
+ if (type === 'multiple') {
+ return !currentDate.length;
+ }
+
+ return !currentDate;
},
},
watch: {
type: 'reset',
-
- value(val) {
- if (val) {
- this.initRect();
- this.scrollIntoView();
- }
- },
+ value: 'init',
defaultDate(val) {
this.currentDate = val;
@@ -138,9 +145,12 @@ export default createComponent({
},
mounted() {
- if (this.value || !this.poppable) {
- this.initRect();
- }
+ this.init();
+ },
+
+ /* istanbul ignore next */
+ activated() {
+ this.init();
},
methods: {
@@ -150,7 +160,11 @@ export default createComponent({
this.scrollIntoView();
},
- initRect() {
+ init() {
+ if (this.poppable && !this.value) {
+ return;
+ }
+
this.$nextTick(() => {
// add Math.floor to avoid decimal height issues
// https://github.com/youzan/vant/issues/5640
@@ -159,13 +173,15 @@ export default createComponent({
);
this.onScroll();
});
+ this.scrollIntoView();
},
// scroll to current month
scrollIntoView() {
this.$nextTick(() => {
const { currentDate } = this;
- const targetDate = this.range ? currentDate[0] : currentDate;
+ const targetDate =
+ this.type === 'single' ? currentDate : currentDate[0];
const displayed = this.value || !this.poppable;
/* istanbul ignore if */
@@ -185,14 +201,26 @@ export default createComponent({
},
getInitialDate() {
- const { type, defaultDate, minDate } = this;
+ const { type, minDate, maxDate, defaultDate } = this;
+
+ let defaultVal = new Date();
+
+ if (compareDay(defaultVal, minDate) === -1) {
+ defaultVal = minDate;
+ } else if (compareDay(defaultVal, maxDate) === 1) {
+ defaultVal = maxDate;
+ }
if (type === 'range') {
const [startDay, endDay] = defaultDate || [];
- return [startDay || minDate, endDay || getNextDay(minDate)];
+ return [startDay || defaultVal, endDay || getNextDay(defaultVal)];
}
- return defaultDate || minDate;
+ if (type === 'multiple') {
+ return defaultDate || [defaultVal];
+ }
+
+ return defaultDate || defaultVal;
},
// calculate the position of the elements
@@ -201,7 +229,7 @@ export default createComponent({
const { body, months } = this.$refs;
const top = getScrollTop(body);
const bottom = top + this.bodyHeight;
- const heights = months.map(item => item.height);
+ const heights = months.map((item) => item.height);
const heightSum = heights.reduce((a, b) => a + b, 0);
// iOS scroll bounce may exceed the range
@@ -226,15 +254,16 @@ export default createComponent({
/* istanbul ignore else */
if (currentMonth) {
- this.monthTitle = currentMonth.title;
+ this.subtitle = currentMonth.title;
}
},
onClickDay(item) {
const { date } = item;
+ const { type, currentDate } = this;
- if (this.range) {
- const [startDay, endDay] = this.currentDate;
+ if (type === 'range') {
+ const [startDay, endDay] = currentDate;
if (startDay && !endDay) {
const compareToStart = compareDay(date, startDay);
@@ -243,10 +272,28 @@ export default createComponent({
this.select([startDay, date], true);
} else if (compareToStart === -1) {
this.select([date, null]);
+ } else if (this.allowSameDay) {
+ this.select([date, date]);
}
} else {
this.select([date, null]);
}
+ } else if (type === 'multiple') {
+ let selectedIndex;
+
+ const selected = this.currentDate.some((dateItem, index) => {
+ const equal = compareDay(dateItem, date) === 0;
+ if (equal) {
+ selectedIndex = index;
+ }
+ return equal;
+ });
+
+ if (selected) {
+ currentDate.splice(selectedIndex, 1);
+ } else {
+ this.select([...currentDate, date]);
+ }
} else {
this.select(date, true);
}
@@ -257,26 +304,36 @@ export default createComponent({
},
select(date, complete) {
- this.currentDate = date;
- this.$emit('select', this.currentDate);
+ const emit = (date) => {
+ this.currentDate = date;
+ this.$emit('select', copyDates(this.currentDate));
+ };
- if (complete && this.range) {
- const valid = this.checkRange();
+ if (complete && this.type === 'range') {
+ const valid = this.checkRange(date);
if (!valid) {
+ // auto selected to max range if showConfirm
+ if (this.showConfirm) {
+ emit([date[0], getDayByOffset(date[0], this.maxRange - 1)]);
+ } else {
+ emit(date);
+ }
return;
}
}
+ emit(date);
+
if (complete && !this.showConfirm) {
this.onConfirm();
}
},
- checkRange() {
- const { maxRange, currentDate, rangePrompt } = this;
+ checkRange(date) {
+ const { maxRange, rangePrompt } = this;
- if (maxRange && calcDateNum(currentDate) > maxRange) {
+ if (maxRange && calcDateNum(date) > maxRange) {
Toast(rangePrompt || t('rangePrompt', maxRange));
return false;
}
@@ -285,14 +342,11 @@ export default createComponent({
},
onConfirm() {
- if (this.range && !this.checkRange()) {
- return;
- }
-
- this.$emit('confirm', this.currentDate);
+ this.$emit('confirm', copyDates(this.currentDate));
},
genMonth(date, index) {
+ const showMonthTitle = index !== 0 || !this.showSubtitle;
return (
{this.genTitle()}
{this.genDays()}
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 8637f11c0..5afa1283d 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -1,88 +1,96 @@
+
选择多个日期
+
+ 选择日期区间
@@ -52,7 +56,7 @@ exports[`renders demo correctly 1`] = `
日历
- 2012年1月
+ 2012年1月
日一二三四五六
@@ -167,7 +171,7 @@ exports[`renders demo correctly 1`] = `
日期选择
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
日期选择
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -98,7 +98,7 @@ exports[`color prop when type is single 1`] = `
日期选择
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -152,7 +152,7 @@ exports[`formatter prop 1`] = `
日期选择
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -206,7 +206,7 @@ exports[`popup wrapper 2`] = `
日期选择
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -259,7 +259,7 @@ exports[`row-height prop 1`] = `
Custom Title
- 2010年1月
+ 2010年1月
日一二三四五六
@@ -310,6 +310,6 @@ exports[`title & footer slot 1`] = `
+
Tag
Tag
-
-
+
+
Button
Button
-
+
```
@@ -65,38 +65,38 @@ Use slot to custom content.
### Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| thumb | Left thumb image URL | *string* | - |
-| title | Title | *string* | - |
-| desc | Description | *string* | - |
-| tag | Tag | *string* | - |
-| num | number | *number \| string* | - |
-| price | Price | *number \| string* | - |
-| origin-price | Origin price | *number \| string* | - |
-| centered | Whether content vertical centered | *boolean* | `false` |
-| currency | Currency symbol | *string* | `¥` |
-| thumb-link | Thumb link URL | *string* | - |
-| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
+| --- | --- | --- | --- |
+| thumb | Left thumb image URL | _string_ | - |
+| title | Title | _string_ | - |
+| desc | Description | _string_ | - |
+| tag | Tag | _string_ | - |
+| num | number | _number \| string_ | - |
+| price | Price | _number \| string_ | - |
+| origin-price | Origin price | _number \| string_ | - |
+| centered | Whether content vertical centered | _boolean_ | `false` |
+| currency | Currency symbol | _string_ | `¥` |
+| thumb-link | Thumb link URL | _string_ | - |
+| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
### Events
-| Event | Description | Arguments |
-|------|------|------|
-| click | Triggered when clicked | *event: Event* |
-| click-thumb | Triggered when thumb clicked | *event: Event* |
+| Event | Description | Arguments |
+| ----------- | ---------------------------- | -------------- |
+| click | Triggered when clicked | _event: Event_ |
+| click-thumb | Triggered when thumb clicked | _event: Event_ |
### Slots
-| Name | Description |
-|------|------|
-| title | Custom title |
-| desc | Custom description |
-| num | Custom num |
-| price | Custom price |
+| Name | Description |
+| ------------ | ------------------- |
+| title | Custom title |
+| desc | Custom description |
+| num | Custom num |
+| price | Custom price |
| origin-price | Custom origin price |
-| price-top | Custom price top |
-| bottom | Custom price bottom |
-| thumb | Custom thumb |
-| tag | Custom thumb tag |
-| tags | Custom tags |
-| footer | Custom footer |
+| price-top | Custom price top |
+| bottom | Custom price bottom |
+| thumb | Custom thumb |
+| tag | Custom thumb tag |
+| tags | Custom tags |
+| footer | Custom footer |
diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md
index 7e5274764..91d51d029 100644
--- a/src/card/README.zh-CN.md
+++ b/src/card/README.zh-CN.md
@@ -51,14 +51,14 @@ Vue.use(Card);
title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
-
+
标签
标签
-
-
+
+
按钮
按钮
-
+
```
@@ -67,38 +67,38 @@ Vue.use(Card);
### Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| thumb | 左侧图片 URL | *string* | - |
-| title | 标题 | *string* | - |
-| desc | 描述 | *string* | - |
-| tag | 图片角标 | *string* | - |
-| num | 商品数量 | *number \| string* | - |
-| price | 商品价格 | *number \| string* | - |
-| origin-price | 商品划线原价 | *number \| string* | - |
-| centered | 内容是否垂直居中 | *boolean* | `false` |
-| currency | 货币符号 | *string* | `¥` |
-| thumb-link | 点击左侧图片后跳转的链接地址 | *string* | - |
-| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| thumb | 左侧图片 URL | _string_ | - |
+| title | 标题 | _string_ | - |
+| desc | 描述 | _string_ | - |
+| tag | 图片角标 | _string_ | - |
+| num | 商品数量 | _number \| string_ | - |
+| price | 商品价格 | _number \| string_ | - |
+| origin-price | 商品划线原价 | _number \| string_ | - |
+| centered | 内容是否垂直居中 | _boolean_ | `false` |
+| currency | 货币符号 | _string_ | `¥` |
+| thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - |
+| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
### Events
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击时触发 | *event: Event* |
-| click-thumb | 点击自定义图片时触发 | *event: Event* |
+| 事件名 | 说明 | 回调参数 |
+| ----------- | -------------------- | -------------- |
+| click | 点击时触发 | _event: Event_ |
+| click-thumb | 点击自定义图片时触发 | _event: Event_ |
### Slots
-| 名称 | 说明 |
-|------|------|
-| title | 自定义标题 |
-| desc | 自定义描述 |
-| num | 自定义数量 |
-| price | 自定义价格 |
-| origin-price | 自定义商品原价 |
-| price-top | 自定义价格上方区域 |
-| bottom | 自定义价格下方区域 |
-| thumb | 自定义图片 |
-| tag | 自定义图片角标 |
-| tags | 自定义描述下方标签区域 |
-| footer | 自定义右下角内容 |
+| 名称 | 说明 |
+| ------------ | ---------------------- |
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| num | 自定义数量 |
+| price | 自定义价格 |
+| origin-price | 自定义商品原价 |
+| price-top | 自定义价格上方区域 |
+| bottom | 自定义价格下方区域 |
+| thumb | 自定义图片 |
+| tag | 自定义图片角标 |
+| tags | 自定义描述下方标签区域 |
+| footer | 自定义右下角内容 |
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index 6c5e5afc4..010f84f49 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -1,33 +1,33 @@
-
+
+
diff --git a/src/empty/index.js b/src/empty/index.js
new file mode 100644
index 000000000..ef3e307a0
--- /dev/null
+++ b/src/empty/index.js
@@ -0,0 +1,68 @@
+import { createNamespace } from '../utils';
+import Network from './Network';
+
+const [createComponent, bem] = createNamespace('empty');
+
+const PRESETS = ['error', 'search', 'default'];
+
+export default createComponent({
+ props: {
+ description: String,
+ image: {
+ type: String,
+ default: 'default',
+ },
+ },
+
+ methods: {
+ genImageContent() {
+ const slots = this.slots('image');
+
+ if (slots) {
+ return slots;
+ }
+
+ if (this.image === 'network') {
+ return 
;
+ },
+
+ genImage() {
+ return
- Send SMS
+
+
+ Send SMS
+
```
@@ -154,15 +150,15 @@ Use `formatter` prop to format the input value
export default {
data() {
return {
- value: ''
+ value: '',
};
},
methods: {
formatter(value) {
return value.replace(/\d/g, '');
- }
- }
-}
+ },
+ },
+};
```
### Auto Resize
@@ -213,67 +209,67 @@ Use `input-align` prop to align the input value
### Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| v-model (value) | Field value | *number \| string* | - |
-| label | Field label | *string* | - |
-| name `v2.5.0` | Name | *string* | - |
-| type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | *string* | `text` | -| size | Size，can be set to `large` | *string* | - | -| maxlength | Max length of value | *number \| string* | - | -| placeholder | Placeholder | *string* | - | -| border | Whether to show inner border | *boolean* | `true` | -| disabled | Whether to disable field | *boolean* | `false` | -| readonly | Whether to be readonly | *boolean* | `false` | -| required | Whether to show required mark | *boolean* | `false` | -| clearable | Whether to be clearable | *boolean* | `false` | -| clickable | Whether to show click feedback when clicked | *boolean* | `false` | -| is-link | Whether to show link icon | *boolean* | `false` | -| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | -| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | -| error | Whether to show error info | *boolean* | `false` | -| error-message | Error message | *string* | - | -| formatter `v2.4.2` | Input value formatter | *Function* | - | -| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` | -| label-class | Label className | *any* | - | -| label-width | Label width | *number \| string* | `90px` | -| label-align | Label align, can be set to `center` `right` | *string* | `left` | -| input-align | Input align, can be set to `center` `right` | *string* | `left` | -| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | -| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` | -| left-icon | Left side icon name | *string* | - | -| right-icon | Right side icon name | *string* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | -| rules `v2.5.0` | Form validation rules | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | Field value | _number \| string_ | - | +| label | Field label | _string_ | - | +| name `v2.5.0` | Name | _string_ | - | +| type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | _string_ | `text` | +| size | Size，can be set to `large` | _string_ | - | +| maxlength | Max length of value | _number \| string_ | - | +| placeholder | Placeholder | _string_ | - | +| border | Whether to show inner border | _boolean_ | `true` | +| disabled | Whether to disable field | _boolean_ | `false` | +| readonly | Whether to be readonly | _boolean_ | `false` | +| required | Whether to show required mark | _boolean_ | `false` | +| clearable | Whether to be clearable | _boolean_ | `false` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | +| is-link | Whether to show link icon | _boolean_ | `false` | +| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` | +| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` | +| error | Whether to show error info | _boolean_ | `false` | +| error-message | Error message | _string_ | - | +| formatter `v2.4.2` | Input value formatter | _Function_ | - | +| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` | +| label-class | Label className | _any_ | - | +| label-width | Label width | _number \| string_ | `90px` | +| label-align | Label align, can be set to `center` `right` | _string_ | `left` | +| input-align | Input align, can be set to `center` `right` | _string_ | `left` | +| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | +| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | +| left-icon | Left side icon name | _string_ | - | +| right-icon | Right side icon name | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| rules `v2.5.0` | Form validation rules | _Rule[]_ | - | ### Events Field support all native events of input tag | Event | Description | Parameters | -|------|------|------| -| input | Triggered when input value changed | *value: string* | -| focus | Triggered when input gets focus | *event: Event* | -| blur | Triggered when input loses focus | *event: Event* | -| clear | Triggered when click clear icon | *event: Event* | -| click | Triggered when click Field | *event: Event* | -| click-left-icon | Triggered when click the left icon of Field | *event: Event* | -| click-right-icon | Triggered when click the right icon of Field | *event: Event* | +| --- | --- | --- | +| input | Triggered when input value changed | _value: string_ | +| focus | Triggered when input gets focus | _event: Event_ | +| blur | Triggered when input loses focus | _event: Event_ | +| clear | Triggered when click clear icon | _event: Event_ | +| click | Triggered when click Field | _event: Event_ | +| click-left-icon | Triggered when click the left icon of Field | _event: Event_ | +| click-right-icon | Triggered when click the right icon of Field | _event: Event_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| focus | Trigger input focus | - | - | -| blur | Trigger input blur | - | - | +| Name | Description | Attribute | Return value | +| ----- | ------------------- | --------- | ------------ | +| focus | Trigger input focus | - | - | +| blur | Trigger input blur | - | - | ### Slots -| Name | Description | -|------|------| -| label | Custom label | -| input | Custom input | -| left-icon | Custom left icon | +| Name | Description | +| ---------- | ----------------- | +| label | Custom label | +| input | Custom input | +| left-icon | Custom left icon | | right-icon | Custom right icon | -| button | Insert button | +| button | Insert button | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index eda9b6ccc..3ab169b9b 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -20,7 +20,7 @@ Vue.use(Field); 可以通过`v-model`双向绑定输入框的值，通过`placeholder`设置占位提示文字 ```html - +
@@ -30,10 +30,10 @@ Vue.use(Field);
export default {
data() {
return {
- value: ''
+ value: '',
};
- }
-}
+ },
+};
```
### 自定义类型
@@ -45,9 +45,9 @@ export default {
发送验证码
+
+ 发送验证码
+
```
@@ -170,16 +172,16 @@ export default {
export default {
data() {
return {
- value: ''
+ value: '',
};
},
methods: {
formatter(value) {
// 过滤输入的数字
return value.replace(/\d/g, '');
- }
- }
-}
+ },
+ },
+};
```
### 高度自适应
@@ -232,70 +234,70 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| v-model (value) | 当前输入的值 | *number \| string* | - |
-| label | 输入框左侧文本 | *string* | - |
-| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - |
-| type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | *string* | `text` | -| size | 大小，可选值为 `large` | *string* | - | -| maxlength | 输入的最大字符数 | *number \| string* | - | -| placeholder | 占位提示文字 | *string* | - | -| border | 是否显示内边框 | *boolean* | `true` | -| disabled | 是否禁用输入框 | *boolean* | `false` | -| readonly | 是否只读 | *boolean* | `false` | -| required | 是否显示表单必填星号 | *boolean* | `false` | -| clearable | 是否启用清除控件 | *boolean* | `false` | -| clickable | 是否开启点击反馈 | *boolean* | `false` | -| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | -| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | -| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | -| error | 是否将输入内容标红 | *boolean* | `false` | -| error-message | 底部错误提示文案，为空时不展示 | *string* | - | -| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - | -| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | -| label-class | 左侧文本额外类名 | *any* | - | -| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` | -| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | -| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | -| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | -| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | *boolean \| object* | `false` | -| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | 当前输入的值 | _number \| string_ | - | +| label | 输入框左侧文本 | _string_ | - | +| name `v2.5.0` | 名称，提交表单的标识符 | _string_ | - | +| type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | _string_ | `text` | +| size | 大小，可选值为 `large` | _string_ | - | +| maxlength | 输入的最大字符数 | _number \| string_ | - | +| placeholder | 占位提示文字 | _string_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| disabled | 是否禁用输入框 | _boolean_ | `false` | +| readonly | 是否只读 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| clearable | 是否启用清除控件 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` | +| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | +| error | 是否将输入内容标红 | _boolean_ | `false` | +| error-message | 底部错误提示文案，为空时不展示 | _string_ | - | +| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - | +| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | +| label-class | 左侧文本额外类名 | _any_ | - | +| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` | +| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` | +| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | +| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | +| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` | +| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - | ### Events 除下列事件外，Field 默认支持 Input 标签所有的原生事件 -| 事件 | 说明 | 回调参数 | -|------|------|------| -| input | 输入框内容变化时触发 | *value: string (当前输入的值)* | -| focus | 输入框获得焦点时触发 | *event: Event* | -| blur | 输入框失去焦点时触发 | *event: Event* | -| clear | 点击清除按钮时触发 | *event: Event* | -| click | 点击时触发 | *event: Event* | -| click-left-icon | 点击左侧图标时触发 | *event: Event* | -| click-right-icon | 点击右侧图标时触发 | *event: Event* | +| 事件 | 说明 | 回调参数 | +| ---------------- | -------------------- | ------------------------------ | +| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ | +| focus | 输入框获得焦点时触发 | _event: Event_ | +| blur | 输入框失去焦点时触发 | _event: Event_ | +| clear | 点击清除按钮时触发 | _event: Event_ | +| click | 点击时触发 | _event: Event_ | +| click-left-icon | 点击左侧图标时触发 | _event: Event_ | +| click-right-icon | 点击右侧图标时触发 | _event: Event_ | ### 方法 通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| focus | 获取输入框焦点 | - | - | -| blur | 取消输入框焦点 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | -------------- | ---- | ------ | +| focus | 获取输入框焦点 | - | - | +| blur | 取消输入框焦点 | - | - | ### Slots -| 名称 | 说明 | -|------|------| -| label | 自定义输入框标签 | -| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | -| left-icon | 自定义输入框头部图标 | -| right-icon | 自定义输入框尾部图标 | -| button | 自定义输入框尾部按钮 | +| 名称 | 说明 | +| ---------- | ---------------------------------------------------------- | +| label | 自定义输入框标签 | +| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | +| left-icon | 自定义输入框头部图标 | +| right-icon | 自定义输入框尾部图标 | +| button | 自定义输入框尾部按钮 | ## 常见问题 diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue index 8744064f8..4c0f63513 100644 --- a/src/field/demo/Autosize.vue +++ b/src/field/demo/Autosize.vue @@ -1,15 +1,13 @@ -
-
-
+
+
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index 5e436f949..842564c89 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -1,7 +1,7 @@
-
+
-
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index 523059a60..1c251a865 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -1,36 +1,34 @@
-
-
-
+
+
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
index 48e52298a..3674b5ace 100644
--- a/src/field/demo/Disabled.vue
+++ b/src/field/demo/Disabled.vue
@@ -1,9 +1,7 @@
-
-
-
+
+
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index 669198d71..ff3703872 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -1,21 +1,19 @@
-
-
-
+
+
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index ef149f913..b750607b4 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -1,13 +1,11 @@
-
-
-
+
+
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index df0cc0191..9a8bd547d 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -1,13 +1,11 @@
-
-
-
+
+
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index c9f95058b..1d1ba881a 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -1,20 +1,18 @@
-
-
-
-
-
- {{ $t('sendSMS') }}
-
-
-
-
+
+
+
+
+ {{ t('sendSMS') }}
+
+
+
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index ea42fa861..03aafbf17 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -1,21 +1,19 @@
-
-
-
+
+
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index 7f73fd46f..44728e01e 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -1,17 +1,15 @@
-
-
-
+
+
diff --git a/src/field/index.js b/src/field/index.js
index 8289ef2c6..df0a6b8de 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -1,6 +1,5 @@
// Utils
import { formatNumber } from './utils';
-import { isIOS } from '../utils/validate/system';
import { preventDefault } from '../utils/dom/event';
import { resetScroll } from '../utils/dom/reset-scroll';
import {
@@ -81,13 +80,13 @@ export default createComponent({
this.$nextTick(this.adjustSize);
if (this.vanForm) {
- this.vanForm.fields.push(this);
+ this.vanForm.addField(this);
}
},
beforeDestroy() {
if (this.vanForm) {
- this.vanForm.fields = this.vanForm.fields.filter(item => item !== this);
+ this.vanForm.removeField(this);
}
},
@@ -102,6 +101,13 @@ export default createComponent({
);
},
+ showError() {
+ if (this.vanForm && this.vanForm.showError && this.validateMessage) {
+ return true;
+ }
+ return this.error;
+ },
+
listeners() {
const listeners = {
...this.$listeners,
@@ -125,7 +131,10 @@ export default createComponent({
},
formValue() {
- return this.children ? this.children.value : this.value;
+ if (this.children && (this.$scopedSlots.input || this.$slots.input)) {
+ return this.children.value;
+ }
+ return this.value;
},
},
@@ -145,7 +154,7 @@ export default createComponent({
},
runValidator(value, rule) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
const returnVal = rule.validator(value, rule);
if (isPromise(returnVal)) {
@@ -204,7 +213,7 @@ export default createComponent({
}
if (rule.validator) {
- return this.runValidator(value, rule).then(result => {
+ return this.runValidator(value, rule).then((result) => {
if (result === false) {
this.validateMessage = this.getRuleMessage(value, rule);
}
@@ -216,7 +225,7 @@ export default createComponent({
},
validate(rules = this.rules) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
if (!rules) {
resolve();
}
@@ -237,7 +246,7 @@ export default createComponent({
validateWithTrigger(trigger) {
if (this.vanForm && this.rules) {
const defaultTrigger = this.vanForm.validateTrigger === trigger;
- const rules = this.rules.filter(rule => {
+ const rules = this.rules.filter((rule) => {
if (rule.trigger) {
return rule.trigger === trigger;
}
@@ -306,7 +315,7 @@ export default createComponent({
this.focused = true;
this.$emit('focus', event);
- // hack for safari
+ // readonly not work in lagacy mobile safari
/* istanbul ignore if */
if (this.readonly) {
this.blur();
@@ -411,24 +420,21 @@ export default createComponent({
}
let inputType = type;
+ let inputMode;
- // type="number" is weired in iOS
+ // type="number" is weired in iOS, and can't prevent dot in Android
+ // so use inputmode to set keyboard in mordern browers
if (type === 'number') {
inputType = 'text';
+ inputMode = 'decimal';
}
if (type === 'digit') {
- // set pattern to show number keyboard in iOS
- if (isIOS()) {
- inputType = 'number';
- inputProps.attrs.pattern = '\\d*';
- // cannot prevent dot when type is number in Android, so use tel
- } else {
- inputType = 'tel';
- }
+ inputType = 'tel';
+ inputMode = 'numeric';
}
- return ;
+ return ;
},
genLeftIcon() {
@@ -475,6 +481,10 @@ export default createComponent({
},
genMessage() {
+ if (this.vanForm && this.vanForm.showErrorMessage === false) {
+ return;
+ }
+
const message = this.errorMessage || this.validateMessage;
if (message) {
@@ -537,7 +547,7 @@ export default createComponent({
scopedSlots={scopedSlots}
arrowDirection={this.arrowDirection}
class={bem({
- error: this.error || this.validateMessage,
+ error: this.showError,
[`label-${labelAlign}`]: labelAlign,
'min-height': this.type === 'textarea' && !this.autosize,
})}
diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap
index 79b388856..4c8bb4137 100644
--- a/src/field/test/__snapshots__/demo.spec.js.snap
+++ b/src/field/test/__snapshots__/demo.spec.js.snap
@@ -12,147 +12,129 @@ exports[`renders demo correctly 1`] = `
{this.genImageContent()}
;
+ },
+
+ genDescription() {
+ const description = this.slots('description') || this.description;
+
+ if (description) {
+ return {description}
; + } + }, + + genBottom() { + const slot = this.slots(); + + if (slot) { + return{slot}
;
+ }
+ },
+ },
+
+ render() {
+ return (
+
+ {this.genImage()}
+ {this.genDescription()}
+ {this.genBottom()}
+
+ );
+ },
+});
diff --git a/src/empty/index.less b/src/empty/index.less
new file mode 100644
index 000000000..2a28d2b86
--- /dev/null
+++ b/src/empty/index.less
@@ -0,0 +1,32 @@
+@import '../style/var';
+
+.van-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ padding: @empty-padding;
+
+ &__image {
+ width: @empty-image-size;
+ height: @empty-image-size;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__description {
+ margin-top: @empty-description-margin-top;
+ padding: @empty-description-padding;
+ color: @empty-description-color;
+ font-size: @empty-description-font-size;
+ line-height: @empty-description-line-height;
+ }
+
+ &__bottom {
+ margin-top: @empty-bottom-margin-top;
+ }
+}
diff --git a/src/empty/test/__snapshots__/demo.spec.js.snap b/src/empty/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..3771c5aba
--- /dev/null
+++ b/src/empty/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
+
+`;
diff --git a/src/empty/test/__snapshots__/index.spec.js.snap b/src/empty/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..4484b79f0
--- /dev/null
+++ b/src/empty/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bottom slot 1`] = `
+
+
+
+ 
+
+ 描述文字
+
+
+
+
+
+
+
+
+ 通用错误
+ 网络错误
+ 搜索提示
+
+
+
+
+
+
+
+
+ 
+
+ 描述文字
+
+
+
+ 
+
+ 描述文字
+
+
+
+
+
+ 描述文字
+ +
+
+
+`;
+
+exports[`description slot 1`] = `
+Custom bottom
+
+
+
+`;
+
+exports[`image slot 1`] = `
+Custom description
+
+
+`;
+
+exports[`render svg when image is network 1`] = `
+Custom Image
+
+
+
+`;
diff --git a/src/empty/test/demo.spec.js b/src/empty/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/empty/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/empty/test/index.spec.js b/src/empty/test/index.spec.js
new file mode 100644
index 000000000..54d3d4438
--- /dev/null
+++ b/src/empty/test/index.spec.js
@@ -0,0 +1,42 @@
+import Empty from '..';
+import { mount } from '../../../test';
+
+test('image slot', () => {
+ const wrapper = mount(Empty, {
+ scopedSlots: {
+ image: () => 'Custom Image',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('description slot', () => {
+ const wrapper = mount(Empty, {
+ scopedSlots: {
+ description: () => 'Custom description',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('bottom slot', () => {
+ const wrapper = mount(Empty, {
+ scopedSlots: {
+ default: () => 'Custom bottom',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render svg when image is network', () => {
+ const wrapper = mount(Empty, {
+ propsData: {
+ image: 'network',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/field/README.md b/src/field/README.md
index 16bcb839e..e9b02bc60 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -25,10 +25,10 @@ The value of field is bound with v-model.
export default {
data() {
return {
- value: ''
+ value: '',
};
- }
-}
+ },
+};
```
### Custom Type
@@ -51,10 +51,10 @@ export default {
text: '',
digit: '',
number: '',
- password: ''
+ password: '',
};
- }
-}
+ },
+};
```
### Disabled
@@ -92,9 +92,9 @@ export default {
data() {
return {
value1: '',
- value2: '123'
+ value2: '123',
};
- }
+ },
};
```
@@ -126,14 +126,10 @@ Use `error` or `error-message` to show error info
Use button slot to insert button
```html
-`number` `textarea` `password` | *string* | `text` | -| size | Size，can be set to `large` | *string* | - | -| maxlength | Max length of value | *number \| string* | - | -| placeholder | Placeholder | *string* | - | -| border | Whether to show inner border | *boolean* | `true` | -| disabled | Whether to disable field | *boolean* | `false` | -| readonly | Whether to be readonly | *boolean* | `false` | -| required | Whether to show required mark | *boolean* | `false` | -| clearable | Whether to be clearable | *boolean* | `false` | -| clickable | Whether to show click feedback when clicked | *boolean* | `false` | -| is-link | Whether to show link icon | *boolean* | `false` | -| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | -| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | -| error | Whether to show error info | *boolean* | `false` | -| error-message | Error message | *string* | - | -| formatter `v2.4.2` | Input value formatter | *Function* | - | -| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` | -| label-class | Label className | *any* | - | -| label-width | Label width | *number \| string* | `90px` | -| label-align | Label align, can be set to `center` `right` | *string* | `left` | -| input-align | Input align, can be set to `center` `right` | *string* | `left` | -| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | -| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` | -| left-icon | Left side icon name | *string* | - | -| right-icon | Right side icon name | *string* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | -| rules `v2.5.0` | Form validation rules | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | Field value | _number \| string_ | - | +| label | Field label | _string_ | - | +| name `v2.5.0` | Name | _string_ | - | +| type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | _string_ | `text` | +| size | Size，can be set to `large` | _string_ | - | +| maxlength | Max length of value | _number \| string_ | - | +| placeholder | Placeholder | _string_ | - | +| border | Whether to show inner border | _boolean_ | `true` | +| disabled | Whether to disable field | _boolean_ | `false` | +| readonly | Whether to be readonly | _boolean_ | `false` | +| required | Whether to show required mark | _boolean_ | `false` | +| clearable | Whether to be clearable | _boolean_ | `false` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | +| is-link | Whether to show link icon | _boolean_ | `false` | +| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` | +| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` | +| error | Whether to show error info | _boolean_ | `false` | +| error-message | Error message | _string_ | - | +| formatter `v2.4.2` | Input value formatter | _Function_ | - | +| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` | +| label-class | Label className | _any_ | - | +| label-width | Label width | _number \| string_ | `90px` | +| label-align | Label align, can be set to `center` `right` | _string_ | `left` | +| input-align | Input align, can be set to `center` `right` | _string_ | `left` | +| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | +| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | +| left-icon | Left side icon name | _string_ | - | +| right-icon | Right side icon name | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| rules `v2.5.0` | Form validation rules | _Rule[]_ | - | ### Events Field support all native events of input tag | Event | Description | Parameters | -|------|------|------| -| input | Triggered when input value changed | *value: string* | -| focus | Triggered when input gets focus | *event: Event* | -| blur | Triggered when input loses focus | *event: Event* | -| clear | Triggered when click clear icon | *event: Event* | -| click | Triggered when click Field | *event: Event* | -| click-left-icon | Triggered when click the left icon of Field | *event: Event* | -| click-right-icon | Triggered when click the right icon of Field | *event: Event* | +| --- | --- | --- | +| input | Triggered when input value changed | _value: string_ | +| focus | Triggered when input gets focus | _event: Event_ | +| blur | Triggered when input loses focus | _event: Event_ | +| clear | Triggered when click clear icon | _event: Event_ | +| click | Triggered when click Field | _event: Event_ | +| click-left-icon | Triggered when click the left icon of Field | _event: Event_ | +| click-right-icon | Triggered when click the right icon of Field | _event: Event_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| focus | Trigger input focus | - | - | -| blur | Trigger input blur | - | - | +| Name | Description | Attribute | Return value | +| ----- | ------------------- | --------- | ------------ | +| focus | Trigger input focus | - | - | +| blur | Trigger input blur | - | - | ### Slots -| Name | Description | -|------|------| -| label | Custom label | -| input | Custom input | -| left-icon | Custom left icon | +| Name | Description | +| ---------- | ----------------- | +| label | Custom label | +| input | Custom input | +| left-icon | Custom left icon | | right-icon | Custom right icon | -| button | Insert button | +| button | Insert button | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index eda9b6ccc..3ab169b9b 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -20,7 +20,7 @@ Vue.use(Field); 可以通过`v-model`双向绑定输入框的值，通过`placeholder`设置占位提示文字 ```html - +
`number` `textarea` `password` 等 | *string* | `text` | -| size | 大小，可选值为 `large` | *string* | - | -| maxlength | 输入的最大字符数 | *number \| string* | - | -| placeholder | 占位提示文字 | *string* | - | -| border | 是否显示内边框 | *boolean* | `true` | -| disabled | 是否禁用输入框 | *boolean* | `false` | -| readonly | 是否只读 | *boolean* | `false` | -| required | 是否显示表单必填星号 | *boolean* | `false` | -| clearable | 是否启用清除控件 | *boolean* | `false` | -| clickable | 是否开启点击反馈 | *boolean* | `false` | -| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | -| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | -| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | -| error | 是否将输入内容标红 | *boolean* | `false` | -| error-message | 底部错误提示文案，为空时不展示 | *string* | - | -| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - | -| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | -| label-class | 左侧文本额外类名 | *any* | - | -| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` | -| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | -| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | -| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | -| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | *boolean \| object* | `false` | -| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | 当前输入的值 | _number \| string_ | - | +| label | 输入框左侧文本 | _string_ | - | +| name `v2.5.0` | 名称，提交表单的标识符 | _string_ | - | +| type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | _string_ | `text` | +| size | 大小，可选值为 `large` | _string_ | - | +| maxlength | 输入的最大字符数 | _number \| string_ | - | +| placeholder | 占位提示文字 | _string_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| disabled | 是否禁用输入框 | _boolean_ | `false` | +| readonly | 是否只读 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| clearable | 是否启用清除控件 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` | +| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | +| error | 是否将输入内容标红 | _boolean_ | `false` | +| error-message | 底部错误提示文案，为空时不展示 | _string_ | - | +| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - | +| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | +| label-class | 左侧文本额外类名 | _any_ | - | +| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` | +| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` | +| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | +| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | +| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` | +| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - | ### Events 除下列事件外，Field 默认支持 Input 标签所有的原生事件 -| 事件 | 说明 | 回调参数 | -|------|------|------| -| input | 输入框内容变化时触发 | *value: string (当前输入的值)* | -| focus | 输入框获得焦点时触发 | *event: Event* | -| blur | 输入框失去焦点时触发 | *event: Event* | -| clear | 点击清除按钮时触发 | *event: Event* | -| click | 点击时触发 | *event: Event* | -| click-left-icon | 点击左侧图标时触发 | *event: Event* | -| click-right-icon | 点击右侧图标时触发 | *event: Event* | +| 事件 | 说明 | 回调参数 | +| ---------------- | -------------------- | ------------------------------ | +| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ | +| focus | 输入框获得焦点时触发 | _event: Event_ | +| blur | 输入框失去焦点时触发 | _event: Event_ | +| clear | 点击清除按钮时触发 | _event: Event_ | +| click | 点击时触发 | _event: Event_ | +| click-left-icon | 点击左侧图标时触发 | _event: Event_ | +| click-right-icon | 点击右侧图标时触发 | _event: Event_ | ### 方法 通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| focus | 获取输入框焦点 | - | - | -| blur | 取消输入框焦点 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | -------------- | ---- | ------ | +| focus | 获取输入框焦点 | - | - | +| blur | 取消输入框焦点 | - | - | ### Slots -| 名称 | 说明 | -|------|------| -| label | 自定义输入框标签 | -| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | -| left-icon | 自定义输入框头部图标 | -| right-icon | 自定义输入框尾部图标 | -| button | 自定义输入框尾部按钮 | +| 名称 | 说明 | +| ---------- | ---------------------------------------------------------- | +| label | 自定义输入框标签 | +| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | +| left-icon | 自定义输入框头部图标 | +| right-icon | 自定义输入框尾部图标 | +| button | 自定义输入框尾部按钮 | ## 常见问题 diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue index 8744064f8..4c0f63513 100644 --- a/src/field/demo/Autosize.vue +++ b/src/field/demo/Autosize.vue @@ -1,15 +1,13 @@ -
-
-
-
文本
-
-
+
+
+
+ 文本
+
+
+
+
+
+ 手机号
+
+
+
+
+
+ 整数
+
+
+
+
+
+ 数字
+
+
+
+
+
+ 密码
+
+
+
+
+
+
+
+ 文本
+
+
+
+
+
+ 文本
+
+
+
+
+
+
+
文本
+
+
-
+
-
+ 手机号
-
-
-
+
+
+
+ 文本
+
+
-
-
+ 整数
-
-
-
+
+
+
用户名
+
+
-
-
+ 数字
-
-
-
+
+
手机号
+
+
+
-
-
+ 密码
-
-
+
+
+
+
短信验证码
+
+
+
-
-
-
- 文本
-
-
-
-
-
文本
-
-
-
+
+
文本
+
+
-
-
-
-
- 文本
-
-
-
-
-
-
-
-
文本
-
-
-
+
+
留言
+
+
-
-
-
- 用户名
-
-
-
-
-
手机号
-
-
-
-
+
+
留言
+
+
+
0/50
-
-
-
-
-
- 短信验证码
-
-
-
-
-
-
-
-
-
-
-
- 文本
-
-
-
-
-
-
-
-
-
- 留言
-
-
-
-
-
-
-
-
-
- 留言
-
-
-
- 0/50
-
-
-
@@ -101,7 +101,7 @@ export default {
return /1\d{10}/.test(val);
},
asyncValidator(val) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
Toast.loading('Validating...');
setTimeout(() => {
@@ -194,7 +194,7 @@ export default {
```html
-
```
@@ -379,7 +379,7 @@ export default {
},
methods: {
onConfirm(values) {
- this.value = values.map(item => item.name).join('/');
+ this.value = values.map((item) => item.name).join('/');
this.showArea = false;
},
},
@@ -423,47 +423,49 @@ export default {
### Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| label-width | Field label width | *number \| string* | `90px` |
-| label-align | Field label align, can be set to `center` `right` | *string* | `left` |
-| input-align | Field input align, can be set to `center` `right` | *string* | `left` |
-| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
-| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` |
-| colon | Whether to display `:` after label | *boolean* | `false` |
-| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
-| scroll-to-error `v2.5.2` | Whether to scroll to the error field when submit failed | *boolean* | `false` |
+| --- | --- | --- | --- |
+| label-width | Field label width | _number \| string_ | `90px` |
+| label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
+| input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
+| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
+| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` |
+| colon | Whether to display `:` after label | _boolean_ | `false` |
+| validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
+| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
+| show-error `v2.6.0` | Whether to highlight input when validation failed | _boolean_ | `true` |
+| show-error-message `v2.5.8` | Whether to show error message when validation failed | _boolean_ | `true` |
-### Data Structure of Rule
+### Data Structure of Rule
| Key | Description | Type |
-|------|------|------|
-| required | Whether to be a required field | *boolean* |
-| message `v2.5.3` | Error message | *string \| (value, rule) => string* |
-| validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* |
-| pattern `v2.5.3` | Regex pattern | *RegExp* |
-| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* |
-| formatter `v2.5.3` | Format value before validate | *(value, rule) => any* |
+| --- | --- | --- |
+| required | Whether to be a required field | _boolean_ |
+| message `v2.5.3` | Error message | _string \| (value, rule) => string_ |
+| validator `v2.5.3` | Custom validator | _(value, rule) => boolean \| Promise_ |
+| pattern `v2.5.3` | Regex pattern | _RegExp_ |
+| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | _string_ |
+| formatter `v2.5.3` | Format value before validate | _(value, rule) => any_ |
### Events
| Event | Description | Arguments |
-|------|------|------|
-| submit | Triggered after submitting the form and validation passed | *values: object* |
-| failed | Triggered after submitting the form and validation failed | *errorInfo: { values: object, errors: object[] }* |
+| --- | --- | --- |
+| submit | Triggered after submitting the form and validation passed | _values: object_ |
+| failed | Triggered after submitting the form and validation failed | _errorInfo: { values: object, errors: object[] }_ |
### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
-| Name | Description | Attribute | Return value |
-|------|------|------|------|
-| submit | Submit form | - | - |
-| validate | Validate form | *name?: string* | *Promise* |
-| resetValidation | Reset validation | *name?: string* | - |
-| scrollToField `v2.5.2` | Scroll to field | *name: string* | - |
+| Name | Description | Attribute | Return value |
+| ---------------------- | ---------------- | --------------- | ------------ |
+| submit | Submit form | - | - |
+| validate | Validate form | _name?: string_ | _Promise_ |
+| resetValidation | Reset validation | _name?: string_ | - |
+| scrollToField `v2.5.2` | Scroll to field | _name: string_ | - |
### Slots
-| Name | Description |
-| ---- | ----------- |
+| Name | Description |
+| ------- | ------------ |
| default | Form content |
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index 501561988..00ad6e42f 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -71,21 +71,21 @@ export default {
v-model="value1"
name="pattern"
placeholder="正则校验"
- :rules="[{ pattern, message: '请输入正确内容 }]"
+ :rules="[{ pattern, message: '请输入正确内容' }]"
/>
@@ -114,7 +114,7 @@ export default {
},
// 异步校验函数返回 Promise
asyncValidator(val) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
Toast.loading('验证中...');
setTimeout(() => {
@@ -412,7 +412,7 @@ export default {
},
methods: {
onConfirm(values) {
- this.value = values.map(item => item.name).join('/');
+ this.value = values.map((item) => item.name).join('/');
this.showArea = false;
},
},
@@ -458,15 +458,17 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| label-width | 表单项 label 宽度，默认单位为`px` | *number \| string* | `90px` |
-| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` |
-| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
-| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
-| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` |
-| colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
-| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
-| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` |
+| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | _string_ | `onBlur` |
+| colon | 是否在 label 后面添加冒号 | _boolean_ | `false` |
+| validate-first | 是否在某一项校验不通过时停止校验 | _boolean_ | `false` |
+| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` |
+| show-error `v2.6.0` | 是否在校验不通过时标红输入框 | _boolean_ | `true` |
+| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` |
> 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
@@ -475,34 +477,48 @@ export default {
使用 Field 的`rules`属性可以定义校验规则，可选属性如下:
| 键名 | 说明 | 类型 |
-|------|------|------|
-| required | 是否为必选字段 | *boolean* |
-| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* |
-| validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* |
-| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* |
-| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* |
-| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value, rule) => any* |
+| --- | --- | --- |
+| required | 是否为必选字段 | _boolean_ |
+| message `v2.5.3` | 错误提示文案 | _string \| (value, rule) => string_ |
+| validator `v2.5.3` | 通过函数进行校验 | _(value, rule) => boolean \| Promise_ |
+| pattern `v2.5.3` | 通过正则表达式进行校验 | _RegExp_ |
+| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | _string_ |
+| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
### Events
| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| submit | 提交表单且验证通过后触发 | *values: object* |
-| failed | 提交表单且验证不通过后触发 | *errorInfo: { values: object, errors: object[] }* |
+| --- | --- | --- |
+| submit | 提交表单且验证通过后触发 | _values: object_ |
+| failed | 提交表单且验证不通过后触发 | _errorInfo: { values: object, errors: object[] }_ |
### 方法
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
-|------|------|------|------|
+| --- | --- | --- | --- |
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
-| validate | 验证表单，支持传入`name`来验证单个表单项 | *name?: string* | *Promise* |
-| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | *name?: string* | - |
-| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | *name: string* | - |
+| validate | 验证表单，支持传入`name`来验证单个表单项 | _name?: string_ | _Promise_ |
+| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - |
+| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | _name: string_ | - |
### Slots
-| 名称 | 说明 |
-|------|------|
+| 名称 | 说明 |
+| ------- | -------- |
| default | 表单内容 |
+
+## 常见问题
+
+### 点击表单中的普通按钮为什么会触发表单提交？
+
+在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将`native-type`设置为`button`，否则会触发表单提交。
+
+```html
+
+ 发送验证码
+
+```
+
+这个问题的原因是浏览器中 button 标签 type 属性的默认值为`submit`，导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为`button`来避免这个问题。
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index ede60f5be..a951291d4 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -1,24 +1,24 @@
-
+
- {{ $t('submit') }}
+ {{ t('submit') }}
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 06957faed..4cb694a87 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -1,59 +1,59 @@
-
+
-
+
-
+
-
+
- {{ $t('checkbox') }} 1
+ {{ t('checkbox') }} 1
- {{ $t('checkbox') }} 2
+ {{ t('checkbox') }} 2
-
+
- {{ $t('radio') }} 1
- {{ $t('radio') }} 2
+ {{ t('radio') }} 1
+ {{ t('radio') }} 2
-
+
-
+
-
+
-
+
- {{ $t('submit') }}
+ {{ t('submit') }}
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index ffad6dcf4..0540a6db5 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -1,17 +1,18 @@
-
-
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 3f678ab07..1e2e16d1a 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -267,7 +267,7 @@ test('formatter prop', () => {
const wrapper = mount(Field, {
propsData: {
value: 'abc123',
- formatter: value => value.replace(/\d/g, ''),
+ formatter: (value) => value.replace(/\d/g, ''),
},
});
@@ -301,7 +301,7 @@ test('name prop', () => {
expect(wrapper).toMatchSnapshot();
});
-test('call focus method before mounted', done => {
+test('call focus method before mounted', (done) => {
mount(Field, {
created() {
this.focus();
diff --git a/src/field/utils.ts b/src/field/utils.ts
index d37981cd0..d9fe3de4d 100644
--- a/src/field/utils.ts
+++ b/src/field/utils.ts
@@ -6,6 +6,8 @@ export function formatNumber(value: string, allowDot: boolean) {
value =
value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
}
+ } else {
+ value = value.split('.')[0];
}
const regExp = allowDot ? /[^0-9.]/g : /\D/g;
diff --git a/src/form/README.md b/src/form/README.md
index 17c826f0d..dfb707667 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -62,19 +62,19 @@ export default {
v-model="value1"
name="pattern"
placeholder="USe pattern"
- :rules="[{ pattern, message: 'Error message }]"
+ :rules="[{ pattern, message: 'Error message' }]"
/>
文本
-
-
-
+
+
文本
+
+
+
+
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 7f72674f9..38a57fcc7 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -1,18 +1,19 @@
-
-
+
+
- {{ $t('submit') }}
+ {{ t('submit') }}
@@ -71,8 +71,8 @@ export default {
},
asyncValidator(val) {
- return new Promise(resolve => {
- this.$toast.loading(this.$t('validating'));
+ return new Promise((resolve) => {
+ this.$toast.loading(this.t('validating'));
setTimeout(() => {
this.$toast.clear();
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 3f7794103..8fb83a612 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -19,3 +19,14 @@ export default {
},
};
+
+
diff --git a/src/form/index.js b/src/form/index.js
index 12ec51a8e..ba5bf22be 100644
--- a/src/form/index.js
+++ b/src/form/index.js
@@ -1,4 +1,5 @@
import { createNamespace } from '../utils';
+import { sortChildren } from '../utils/vnodes';
const [createComponent, bem] = createNamespace('form');
@@ -15,6 +16,14 @@ export default createComponent({
type: String,
default: 'onBlur',
},
+ showError: {
+ type: Boolean,
+ default: true,
+ },
+ showErrorMessage: {
+ type: Boolean,
+ default: true,
+ },
},
provide() {
@@ -39,7 +48,7 @@ export default createComponent({
(promise, field) =>
promise.then(() => {
if (!errors.length) {
- return field.validate().then(error => {
+ return field.validate().then((error) => {
if (error) {
errors.push(error);
}
@@ -60,15 +69,17 @@ export default createComponent({
validateAll() {
return new Promise((resolve, reject) => {
- Promise.all(this.fields.map(item => item.validate())).then(errors => {
- errors = errors.filter(item => item);
+ Promise.all(this.fields.map((item) => item.validate())).then(
+ (errors) => {
+ errors = errors.filter((item) => item);
- if (errors.length) {
- reject(errors);
- } else {
- resolve();
+ if (errors.length) {
+ reject(errors);
+ } else {
+ resolve();
+ }
}
- });
+ );
});
},
@@ -81,11 +92,11 @@ export default createComponent({
},
validateField(name) {
- const matched = this.fields.filter(item => item.name === name);
+ const matched = this.fields.filter((item) => item.name === name);
if (matched.length) {
return new Promise((resolve, reject) => {
- matched[0].validate().then(error => {
+ matched[0].validate().then((error) => {
if (error) {
reject(error);
} else {
@@ -100,7 +111,7 @@ export default createComponent({
// @exposed-api
resetValidation(name) {
- this.fields.forEach(item => {
+ this.fields.forEach((item) => {
if (!name || item.name === name) {
item.resetValidation();
}
@@ -109,13 +120,22 @@ export default createComponent({
// @exposed-api
scrollToField(name) {
- this.fields.forEach(item => {
+ this.fields.forEach((item) => {
if (item.name === name) {
item.$el.scrollIntoView();
}
});
},
+ addField(field) {
+ this.fields.push(field);
+ sortChildren(this.fields, this);
+ },
+
+ removeField(field) {
+ this.fields = this.fields.filter((item) => item !== field);
+ },
+
getValues() {
return this.fields.reduce((form, field) => {
form[field.name] = field.formValue;
@@ -136,7 +156,7 @@ export default createComponent({
.then(() => {
this.$emit('submit', values);
})
- .catch(errors => {
+ .catch((errors) => {
this.$emit('failed', {
values,
errors,
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index 4d3b18f05..57d86d5a2 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -120,7 +120,7 @@ exports[`renders demo correctly 1`] = `
@@ -184,8 +184,8 @@ exports[`renders demo correctly 1`] = `
-
+
-
+
+
-
选择器
@@ -193,8 +193,8 @@ exports[`renders demo correctly 1`] = `
-
+
+
-
时间选择
@@ -202,8 +202,8 @@ exports[`renders demo correctly 1`] = `
-
+
+
地区选择
diff --git a/src/form/test/field-type.spec.js b/src/form/test/field-type.spec.js
index b41aedef5..7e1c1249d 100644
--- a/src/form/test/field-type.spec.js
+++ b/src/form/test/field-type.spec.js
@@ -196,3 +196,26 @@ test('use uploader', async () => {
await submitForm(wrapper);
expect(onSubmit).toHaveBeenCalledWith({ A: [{ url: 'foo' }] });
});
+
+test('should not get formValue from button slot', async () => {
+ const onSubmit = jest.fn();
+
+ const wrapper = mountForm({
+ template: `
+
+
+
+
+
+ `,
+ methods: {
+ onSubmit,
+ },
+ });
+
+ await submitForm(wrapper);
+ expect(onSubmit).toHaveBeenCalledWith({ A: 'foo' });
+});
diff --git a/src/form/test/index.spec.js b/src/form/test/index.spec.js
index 47ff652b7..4e97428d7 100644
--- a/src/form/test/index.spec.js
+++ b/src/form/test/index.spec.js
@@ -35,3 +35,41 @@ test('dynamic add/remove fileds', async () => {
await submitForm(wrapper);
expect(onSubmit).toHaveBeenCalledWith({ B: '' });
});
+
+test('dynamic add fileds when validate-first', async () => {
+ const onFailed = jest.fn();
+ const wrapper = mountForm({
+ template: `
+
+
+ `,
+ data() {
+ return {
+ show: false,
+ };
+ },
+ methods: {
+ onFailed,
+ },
+ });
+
+ await submitForm(wrapper);
+ expect(onFailed.mock.calls[0][0].errors[0].name).toEqual('B');
+
+ wrapper.setData({ show: true });
+
+ await submitForm(wrapper);
+ expect(onFailed.mock.calls[1][0].errors[0].name).toEqual('A');
+});
diff --git a/src/form/test/methods.spec.js b/src/form/test/methods.spec.js
index 98a771aaf..d00cd0679 100644
--- a/src/form/test/methods.spec.js
+++ b/src/form/test/methods.spec.js
@@ -23,10 +23,10 @@ test('submit method', async () => {
expect(onSubmit).toHaveBeenCalledWith({ A: 'bar' });
});
-test('validate method - validate all fields', done => {
+test('validate method - validate all fields', (done) => {
mountSimpleRulesForm({
mounted() {
- this.$refs.form.validate().catch(err => {
+ this.$refs.form.validate().catch((err) => {
expect(err).toEqual([
{ message: 'A failed', name: 'A' },
{ message: 'B failed', name: 'B' },
@@ -37,10 +37,10 @@ test('validate method - validate all fields', done => {
});
});
-test('validate method - validate one field and passed', done => {
+test('validate method - validate one field and passed', (done) => {
mountSimpleRulesForm({
mounted() {
- this.$refs.form.validate('A').catch(err => {
+ this.$refs.form.validate('A').catch((err) => {
expect(err).toEqual({ message: 'A failed', name: 'A' });
done();
});
@@ -48,7 +48,7 @@ test('validate method - validate one field and passed', done => {
});
});
-test('validate method - validate one field and failed', done => {
+test('validate method - validate one field and failed', (done) => {
mountForm({
template: `
@@ -64,7 +64,7 @@ test('validate method - validate one field and failed', done => {
});
});
-test('validate method - unexisted name', done => {
+test('validate method - unexisted name', (done) => {
mountSimpleRulesForm({
mounted() {
this.$refs.form.validate('unexisted').catch(done);
@@ -72,7 +72,7 @@ test('validate method - unexisted name', done => {
});
});
-test('resetValidation method - reset all fields', done => {
+test('resetValidation method - reset all fields', (done) => {
const wrapper = mountSimpleRulesForm({
mounted() {
this.$refs.form.validate().catch(() => {
@@ -85,7 +85,7 @@ test('resetValidation method - reset all fields', done => {
});
});
-test('resetValidation method - reset one field', done => {
+test('resetValidation method - reset one field', (done) => {
const wrapper = mountSimpleRulesForm({
mounted() {
this.$refs.form.validate().catch(() => {
@@ -97,7 +97,7 @@ test('resetValidation method - reset one field', done => {
});
});
-test('scrollToField method', done => {
+test('scrollToField method', (done) => {
const fn = mockScrollIntoView();
mountSimpleRulesForm({
mounted() {
diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js
index f14bd54e6..c12959d1a 100644
--- a/src/form/test/props.spec.js
+++ b/src/form/test/props.spec.js
@@ -14,8 +14,8 @@ test('rules prop - execute order', async () => {
return {
rules: [
{ required: true, message: 'A' },
- { validator: val => val.length > 6, message: 'B' },
- { validator: val => val !== 'foo', message: 'C' },
+ { validator: (val) => val.length > 6, message: 'B' },
+ { validator: (val) => val !== 'foo', message: 'C' },
],
};
},
@@ -70,7 +70,7 @@ test('rules prop - message function', async () => {
`,
data() {
return {
- rules: [{ pattern: /\d{6}/, message: val => val }],
+ rules: [{ pattern: /\d{6}/, message: (val) => val }],
};
},
methods: {
@@ -138,12 +138,12 @@ test('rules prop - async validator', async () => {
validator: (value, rule) => {
expect(value).toEqual('123');
expect(typeof rule).toEqual('object');
- return new Promise(resolve => resolve(true));
+ return new Promise((resolve) => resolve(true));
},
message: 'should pass',
},
{
- validator: () => new Promise(resolve => resolve(false)),
+ validator: () => new Promise((resolve) => resolve(false)),
message: 'should fail',
},
],
@@ -381,3 +381,53 @@ test('scroll-to-error prop', async () => {
expect(fn).toHaveBeenCalledTimes(1);
});
+
+test('show-error-message prop', async () => {
+ const wrapper = mountForm({
+ template: `
+
+
+ `,
+ data() {
+ return {
+ ...getSimpleRules(),
+ showErrorMessage: false,
+ };
+ },
+ });
+
+ await submitForm(wrapper);
+ expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
+
+ wrapper.setData({ showErrorMessage: true });
+
+ await submitForm(wrapper);
+ expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
+});
+
+test('show-error prop', async () => {
+ const wrapper = mountForm({
+ template: `
+
+
+ `,
+ data() {
+ return {
+ ...getSimpleRules(),
+ showError: false,
+ };
+ },
+ });
+
+ await submitForm(wrapper);
+ expect(wrapper.contains('.van-field--error')).toBeFalsy();
+
+ wrapper.setData({ showError: true });
+
+ await submitForm(wrapper);
+ expect(wrapper.contains('.van-field--error')).toBeTruthy();
+});
diff --git a/src/goods-action-icon/index.js b/src/goods-action-icon/index.js
index 588e040e6..b9bb118dc 100644
--- a/src/goods-action-icon/index.js
+++ b/src/goods-action-icon/index.js
@@ -1,6 +1,7 @@
-import { createNamespace } from '../utils';
+import { createNamespace, isDef } from '../utils';
import { route, routeProps } from '../utils/router';
import { ChildrenMixin } from '../mixins/relation';
+import Info from '../info';
import Icon from '../icon';
const [createComponent, bem] = createNamespace('goods-action-icon');
@@ -10,10 +11,12 @@ export default createComponent({
props: {
...routeProps,
+ dot: Boolean,
text: String,
icon: String,
color: String,
info: [Number, String],
+ badge: [Number, String],
iconClass: null,
},
@@ -25,16 +28,23 @@ export default createComponent({
genIcon() {
const slot = this.slots('icon');
+ const info = isDef(this.badge) ? this.badge : this.info;
if (slot) {
- return
```
@@ -34,20 +42,20 @@ export default {
},
onClickButton() {
Toast('Click Button');
- }
- }
-}
+ },
+ },
+};
```
-### Icon info
+### Icon Badge
-Use `info` prop to show badge in icon
+Use `badge` prop to show badge in icon
```html
-
@@ -81,46 +89,47 @@ Use `info` prop to show badge in icon
### GoodsAction Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` |
+| --- | --- | --- | --- |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### GoodsActionIcon Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| text | Button text | *string* | - |
-| icon | Icon | *string* | - |
-| color `v2.4.2` | Icon color | *string* | `#323233` |
-| icon-class | Icon class name | *any* | `''` |
-| info | Content of the badge | *number \| string* | - |
-| url | Link | *string* | - |
-| to | Target route of the link, same as to of vue-router | *string \| object* | - |
-| replace | If true, the navigation will not leave a history record | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | Button text | _string_ | - |
+| icon | Icon | _string_ | - |
+| color `v2.4.2` | Icon color | _string_ | `#323233` |
+| icon-class | Icon class name | _any_ | `''` |
+| dot `2.5.5` | Whether to show red dot | _boolean_ | - |
+| badge `2.5.6` | Content of the badge | _number \| string_ | - |
+| url | Link | _string_ | - |
+| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
+| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GoodsActionButton Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| text | Button text | *string* | - |
-| type | Button type, Can be set to `primary` `info` `warning` `danger` | *string* | `default` |
-| color `v2.1.8` | Button color, support linear-gradient | *string* | - |
-| icon `v2.4.4` | Left Icon | *string* | - |
-| primary | Is primary button (red color) | *boolean* | `false` |
-| disabled | Whether to disable button | *boolean* | `false` |
-| loading | Whether show loading status | *boolean* | `false` |
-| url | Link | *string* | - |
-| to | Target route of the link, same as to of vue-router | *string \| object* | - |
-| replace | If true, the navigation will not leave a history record | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | Button text | _string_ | - |
+| type | Button type, Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
+| color `v2.1.8` | Button color, support linear-gradient | _string_ | - |
+| icon `v2.4.4` | Left Icon | _string_ | - |
+| primary | Is primary button (red color) | _boolean_ | `false` |
+| disabled | Whether to disable button | _boolean_ | `false` |
+| loading | Whether show loading status | _boolean_ | `false` |
+| url | Link | _string_ | - |
+| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
+| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GoodsActionIcon Slots
-| Name | Description |
-|------|------|
-| default | Text |
-| icon | Custom icon |
+| Name | Description |
+| ------- | ----------- |
+| default | Text |
+| icon | Custom icon |
### GoodsActionButton Slots
-| Name | Description |
-|------|------|
+| Name | Description |
+| ------- | -------------- |
| default | Button content |
diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md
index 14b6a5578..6ec54edcd 100644
--- a/src/goods-action/README.zh-CN.md
+++ b/src/goods-action/README.zh-CN.md
@@ -19,8 +19,16 @@ Vue.use(GoodsActionIcon);
```
@@ -34,20 +42,20 @@ export default {
},
onClickButton() {
Toast('点击按钮');
- }
- }
-}
+ },
+ },
+};
```
### 徽标提示
-通过`info`属性在图标右上角显示徽标
+在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html
-
@@ -85,45 +93,47 @@ export default {
### GoodsAction Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
+| --- | --- | --- | --- |
+| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
### GoodsActionIcon Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| text | 按钮文字 | *string* | - |
-| icon | 图标 | *string* | - |
-| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
-| icon-class | 图标额外类名 | *any* | - |
-| info | 图标右上角徽标的内容 | *number \| string* | - |
-| url | 点击后跳转的链接地址 | *string* | - |
-| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
-| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | 按钮文字 | _string_ | - |
+| icon | 图标 | _string_ | - |
+| color `v2.4.2` | 图标颜色 | _string_ | `#323233` |
+| icon-class | 图标额外类名 | _any_ | - |
+| dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
+| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
+| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
+| url | 点击后跳转的链接地址 | _string_ | - |
+| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
+| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionButton Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| text | 按钮文字 | *string* | - |
-| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` |
-| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
-| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
-| disabled | 是否禁用按钮 | *boolean* | `false` | - |
-| loading | 是否显示为加载状态 | *boolean* | `false` | - |
-| url | 点击后跳转的链接地址 | *string* | - |
-| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
-| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | 按钮文字 | _string_ | - |
+| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
+| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
+| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| disabled | 是否禁用按钮 | _boolean_ | `false` | - |
+| loading | 是否显示为加载状态 | _boolean_ | `false` | - |
+| url | 点击后跳转的链接地址 | _string_ | - |
+| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
+| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionIcon Slots
-| 名称 | 说明 |
-|------|------|
-| default | 文本内容 |
-| icon | 自定义图标 |
+| 名称 | 说明 |
+| ------- | ---------- |
+| default | 文本内容 |
+| icon | 自定义图标 |
### GoodsActionButton Slots
-| 名称 | 说明 |
-|------|------|
+| 名称 | 说明 |
+| ------- | ------------ |
| default | 按钮显示内容 |
diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue
index 046c72f18..0b5f9f310 100644
--- a/src/goods-action/demo/index.vue
+++ b/src/goods-action/demo/index.vue
@@ -1,71 +1,71 @@
-
+
-
+
-
-
+
-
+
-
@@ -81,7 +81,7 @@ export default {
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
- iconInfo: '徽标提示',
+ iconBadge: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
@@ -94,7 +94,7 @@ export default {
icon3: 'Icon3',
button1: 'Button1',
button2: 'Button2',
- iconInfo: 'Icon info',
+ iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',
@@ -104,10 +104,10 @@ export default {
},
methods: {
onClickIcon() {
- this.$toast(this.$t('clickIcon'));
+ this.$toast(this.t('clickIcon'));
},
onClickButton() {
- this.$toast(this.$t('clickButton'));
+ this.$toast(this.t('clickButton'));
},
},
};
@@ -117,6 +117,7 @@ export default {
.demo-goods-action {
.van-goods-action {
position: relative;
+ padding-bottom: 0;
}
}
diff --git a/src/goods-action/index.js b/src/goods-action/index.js
index e677b7c50..a5ec63f97 100644
--- a/src/goods-action/index.js
+++ b/src/goods-action/index.js
@@ -7,12 +7,15 @@ export default createComponent({
mixins: [ParentMixin('vanGoodsAction')],
props: {
- safeAreaInsetBottom: Boolean,
+ safeAreaInsetBottom: {
+ type: Boolean,
+ default: true,
+ },
},
render() {
return (
-
{slot}
;
+ return (
+
+ {slot}
+
+ );
}
return (
+
{this.slots()}
);
diff --git a/src/goods-action/index.less b/src/goods-action/index.less
index a8931039a..5f06c0846 100644
--- a/src/goods-action/index.less
+++ b/src/goods-action/index.less
@@ -7,11 +7,13 @@
left: 0;
display: flex;
align-items: center;
+ box-sizing: content-box;
height: @goods-action-height;
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
background-color: @goods-action-background-color;
- &--safe-area-inset-bottom {
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
+ &--unfit {
+ padding-bottom: 0;
}
}
diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap
index 1cc517051..4c36ac40d 100644
--- a/src/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/src/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/src/goods-action/test/__snapshots__/index.spec.js.snap b/src/goods-action/test/__snapshots__/index.spec.js.snap
index fdaef8b25..c6108e99b 100644
--- a/src/goods-action/test/__snapshots__/index.spec.js.snap
+++ b/src/goods-action/test/__snapshots__/index.spec.js.snap
@@ -12,6 +12,24 @@ exports[`Icon render default slot 1`] = `
exports[`Icon render icon slot 1`] = `
`;
+
+exports[`Icon render icon slot with dot 1`] = `
+
+`;
+
+exports[`Icon render icon slot with info 1`] = `
+
+`;
+
+exports[`disable safe-area-inset-bottom prop 1`] = ``;
diff --git a/src/goods-action/test/index.spec.js b/src/goods-action/test/index.spec.js
index 71f21d360..c96de3d11 100644
--- a/src/goods-action/test/index.spec.js
+++ b/src/goods-action/test/index.spec.js
@@ -1,3 +1,4 @@
+import GoodsAction from '..';
import Button from '../../goods-action-button';
import Icon from '../../goods-action-icon';
import { mount } from '../../../test';
@@ -48,3 +49,49 @@ test('Icon render icon slot', () => {
expect(wrapper).toMatchSnapshot();
});
+
+test('Icon render icon slot with info', () => {
+ const wrapper = mount({
+ render(h) {
+ return h(Icon, {
+ props: {
+ info: '1',
+ },
+ scopedSlots: {
+ default: () => 'Text',
+ icon: () => 'Custom Icon',
+ },
+ });
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('Icon render icon slot with dot', () => {
+ const wrapper = mount({
+ render(h) {
+ return h(Icon, {
+ props: {
+ dot: true,
+ },
+ scopedSlots: {
+ default: () => 'Text',
+ icon: () => 'Custom Icon',
+ },
+ });
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('disable safe-area-inset-bottom prop', () => {
+ const wrapper = mount(GoodsAction, {
+ propsData: {
+ safeAreaInsetBottom: false,
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index 0783718c7..aecb9e7be 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -1,5 +1,5 @@
// Utils
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, isDef } from '../utils';
import { BORDER } from '../utils/constant';
import { route, routeProps } from '../utils/router';
@@ -22,6 +22,7 @@ export default createComponent({
icon: String,
iconPrefix: String,
info: [Number, String],
+ badge: [Number, String],
},
computed: {
@@ -70,12 +71,13 @@ export default createComponent({
genIcon() {
const iconSlot = this.slots('icon');
+ const info = isDef(this.badge) ? this.badge : this.info;
if (iconSlot) {
return (
-
-
```
@@ -69,12 +59,7 @@ Vue.use(GridItem);
```html
-
```
@@ -87,12 +72,12 @@ Vue.use(GridItem);
```
-### Show Info
+### Show Badge
```html
```
@@ -101,38 +86,38 @@ Vue.use(GridItem);
### Grid Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| column-num `v2.0.4` | Column Num | *number \| string* | `4` |
-| icon-size `v2.2.6` | Icon size | *number \| string* | `28px` |
-| gutter | Gutter | *number \| string* | `0` |
-| border | Whether to show border | *boolean* | `true` |
-| center | Whether to center content | *boolean* | `true` |
-| square | Whether to be square shape | *boolean* | `false` |
-| clickable | Whether to show click feedback when clicked | *boolean* | `false` |
+| --- | --- | --- | --- |
+| column-num `v2.0.4` | Column Num | _number \| string_ | `4` |
+| icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` |
+| gutter | Gutter | _number \| string_ | `0` |
+| border | Whether to show border | _boolean_ | `true` |
+| center | Whether to center content | _boolean_ | `true` |
+| square | Whether to be square shape | _boolean_ | `false` |
+| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
### GridItem Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| text | Text | *string* | - |
-| icon | Icon name or URL | *string* | - |
-| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
-| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
-| info `v2.2.1` | Content of the badge | *number \| string* | - |
-| url | Link URL | *string* | - |
-| to | Target route of the link, same as to of vue-router | *string \| object* | - |
-| replace | If true, the navigation will not leave a history record | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | Text | _string_ | - |
+| icon | Icon name or URL | _string_ | - |
+| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
+| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
+| badge `v2.5.6` | Content of the badge | _number \| string_ | - |
+| url | Link URL | _string_ | - |
+| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
+| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GridItem Events
-| Event | Description | Arguments |
-|------|------|------|
-| click | Triggered when clicked | *event: Event* |
+| Event | Description | Arguments |
+| ----- | ---------------------- | -------------- |
+| click | Triggered when clicked | _event: Event_ |
### GridItem Slots
-| Name | Description |
-|------|------|
+| Name | Description |
+| ------- | -------------- |
| default | Custom content |
-| icon | Custom icon |
-| text | Custom text |
+| icon | Custom icon |
+| text | Custom text |
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index 4e2035911..f766652b6 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -16,7 +16,7 @@ Vue.use(GridItem);
## 代码演示
-### 基本用法
+### 基础用法
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
@@ -35,12 +35,7 @@ Vue.use(GridItem);
```html
-
```
@@ -68,12 +63,7 @@ Vue.use(GridItem);
```html
-
```
@@ -83,12 +73,7 @@ Vue.use(GridItem);
```html
-
```
@@ -103,14 +88,14 @@ Vue.use(GridItem);
```
-### 提示信息
+### 徽标提示
-设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html
```
@@ -119,38 +104,39 @@ Vue.use(GridItem);
### Grid Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| column-num `v2.0.4` | 列数 | *number \| string* | `4` |
-| icon-size `v2.2.6` | 图标大小，默认单位为`px` | *number \| string* | `28px` |
-| gutter | 格子之间的间距，默认单位为`px` | *number \| string* | `0` |
-| border | 是否显示边框 | *boolean* | `true` |
-| center | 是否将格子内容居中显示 | *boolean* | `true` |
-| square | 是否将格子固定为正方形 | *boolean* | `false` |
-| clickable | 是否开启格子点击反馈 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| column-num `v2.0.4` | 列数 | _number \| string_ | `4` |
+| icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
+| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
+| border | 是否显示边框 | _boolean_ | `true` |
+| center | 是否将格子内容居中显示 | _boolean_ | `true` |
+| square | 是否将格子固定为正方形 | _boolean_ | `false` |
+| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
### GridItem Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| text | 文字 | *string* | - |
-| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
-| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
-| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
-| info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
-| url | 点击后跳转的链接地址 | *string* | - |
-| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
-| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| text | 文字 | _string_ | - |
+| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
+| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
+| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
+| url | 点击后跳转的链接地址 | _string_ | - |
+| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
+| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GridItem Events
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击格子时触发 | *event: Event* |
+| 事件名 | 说明 | 回调参数 |
+| ------ | -------------- | -------------- |
+| click | 点击格子时触发 | _event: Event_ |
### GridItem Slots
-| 名称 | 说明 |
-|------|------|
+| 名称 | 说明 |
+| ------- | -------------------- |
| default | 自定义宫格的所有内容 |
-| icon | 自定义图标 |
-| text | 自定义文字 |
+| icon | 自定义图标 |
+| text | 自定义文字 |
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index ce79d70ed..241f0e69b 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -1,28 +1,28 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
-
@@ -99,7 +99,7 @@ export default {
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
- showInfo: '提示信息',
+ showBadge: '徽标提示',
},
'en-US': {
text: 'Text',
@@ -110,7 +110,7 @@ export default {
customContent: 'Custom Content',
urlRoute: 'URL',
vueRoute: 'Vue Router',
- showInfo: 'Show Info',
+ showBadge: 'Show Badge',
},
},
};
diff --git a/src/icon/README.md b/src/icon/README.md
index 63da9842e..fac716683 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -20,16 +20,16 @@ Use `name` prop to set icon name or icon URL
-
-
+
+
@@ -11,19 +11,19 @@
-
+
-
-
+
-
-
+
-
+
@@ -32,7 +32,7 @@
-
+
@@ -42,7 +42,7 @@
-
+
-
+
-
+
{slots.default && slots.default()}
{imageIcon && 
}
-
+
{iconSlot}
-
);
}
@@ -85,7 +87,7 @@ export default createComponent({
{this.genClose()}
{this.genImages()}
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index dc9d57aac..e34a1e8be 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -16,7 +16,7 @@ Vue.use(ImagePreview);
```js
ImagePreview([
'https://img.yzcdn.cn/vant/apple-1.jpg',
- 'https://img.yzcdn.cn/vant/apple-2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
]);
```
@@ -26,12 +26,12 @@ ImagePreview([
ImagePreview({
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
- 'https://img.yzcdn.cn/vant/apple-2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
startPosition: 1,
onClose() {
// do something
- }
+ },
});
```
@@ -42,10 +42,10 @@ After setting the `closeable` attribute, the close icon will be displayed in the
```js
ImagePreview({
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
- closeable: true
+ closeable: true,
});
```
@@ -55,9 +55,9 @@ ImagePreview({
const instance = ImagePreview({
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
- 'https://img.yzcdn.cn/vant/apple-2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
- asyncClose: true
+ asyncClose: true,
});
setTimeout(() => {
@@ -80,18 +80,18 @@ export default {
show: false,
index: 0,
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
- ]
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
+ ],
};
},
methods: {
onChange(index) {
this.index = index;
- }
- }
-}
+ },
+ },
+};
```
## API
@@ -99,71 +99,70 @@ export default {
### Options
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| images | Images URL list | *string[]* | `[]` |
-| startPosition | Start position | *number \| string* | `0` |
-| showIndex | Whether to show index | *boolean* | `true` |
-| showIndicators | Whether to show indicators | *boolean* | `false` |
-| loop | Whether to enable loop | *boolean* | `true` |
-| swipeDuration | Animation duration (ms) | *number \| string* | `500` |
-| onClose | Triggered when close | *Function* | - |
-| onChange `v2.0.3` | Triggered when current image change | *Function* | - |
-| onScale | Triggered when current image scale | *Function* | - |
-| closeOnPopstate | Whether to close when popstate | *boolean* | `false` |
-| asyncClose | Whether to enable async close | *boolean* | `false` |
-| className | Custom className | *any* | - |
-| lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
-| maxZoom | Max zoom | *number \| string* | `3` |
-| minZoom | Min zoom | *number \| string* | `1/3` |
-| closeable | Whether to show close icon | *boolean* | `false` |
-| closeIcon | Close icon name | *string* | `clear` |
-| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` |
+| --- | --- | --- | --- |
+| images | Images URL list | _string[]_ | `[]` |
+| startPosition | Start position | _number \| string_ | `0` |
+| showIndex | Whether to show index | _boolean_ | `true` |
+| showIndicators | Whether to show indicators | _boolean_ | `false` |
+| loop | Whether to enable loop | _boolean_ | `true` |
+| swipeDuration | Animation duration (ms) | _number \| string_ | `500` |
+| onClose | Triggered when close | _Function_ | - |
+| onChange `v2.0.3` | Triggered when current image change | _Function_ | - |
+| onScale | Triggered when current image scale | _Function_ | - |
+| closeOnPopstate | Whether to close when popstate | _boolean_ | `false` |
+| asyncClose | Whether to enable async close | _boolean_ | `false` |
+| className | Custom className | _any_ | - |
+| maxZoom | Max zoom | _number \| string_ | `3` |
+| minZoom | Min zoom | _number \| string_ | `1/3` |
+| closeable | Whether to show close icon | _boolean_ | `false` |
+| closeIcon | Close icon name | _string_ | `clear` |
+| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
### Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| images | Images URL list | *string[]* | `[]` |
-| start-position | Start position | *number \| string* | `0` |
-| swipe-duration | Animation duration (ms) | *number \| string* | `500` |
-| show-index | Whether to show index | *boolean* | `true` |
-| show-indicators | Whether to show indicators | *boolean* | `false` |
-| loop | Whether to enable loop | *boolean* | `true` |
-| async-close | Whether to enable async close | *boolean* | `false` |
-| close-on-popstate | Whether to close when popstate | *boolean* | `false` |
-| class-name | Custom className | *any* | - |
-| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
-| max-zoom | Max zoom | *number \| string* | `3` |
-| min-zoom | Min zoom | *number \| string* | `1/3` |
-| closeable `v2.5.0` | Whether to show close icon | *boolean* | `false` |
-| close-icon `v2.5.0` | Close icon name | *string* | `clear` |
-| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` |
+| --- | --- | --- | --- |
+| images | Images URL list | _string[]_ | `[]` |
+| start-position | Start position | _number \| string_ | `0` |
+| swipe-duration | Animation duration (ms) | _number \| string_ | `500` |
+| show-index | Whether to show index | _boolean_ | `true` |
+| show-indicators | Whether to show indicators | _boolean_ | `false` |
+| loop | Whether to enable loop | _boolean_ | `true` |
+| async-close | Whether to enable async close | _boolean_ | `false` |
+| close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
+| class-name | Custom className | _any_ | - |
+| max-zoom | Max zoom | _number \| string_ | `3` |
+| min-zoom | Min zoom | _number \| string_ | `1/3` |
+| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
+| close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
+| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
### Events
| Event | Description | Parameters |
-|------|------|------|
+| --- | --- | --- |
| close | Triggered when close | { index, url } |
+| closed `v2.5.6` | Triggered after closed | - |
| change | Triggered when current image change | index: index of current image |
| scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
### Slots
-| Name | Description |
-|------|------|
-| index | Custom index |
+| Name | Description |
+| ----- | -------------------------------------------- |
+| index | Custom index |
| cover | Custom content that covers the image preview |
### onClose Parematers
-| Attribute | Description | Type |
-|------|------|------|
-| url | Url of current image | *number* |
-| index | Index of current image | *number* |
+| Attribute | Description | Type |
+| --------- | ---------------------- | -------- |
+| url | Url of current image | _number_ |
+| index | Index of current image | _number_ |
### onScale Parematers
-| Attribute | Description | Type |
-|------|------|------|
-| index | Index of current image | *number* |
-| scale | scale of current image | *number* |
+| Attribute | Description | Type |
+| --------- | ---------------------- | -------- |
+| index | Index of current image | _number_ |
+| scale | scale of current image | _number_ |
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 65dce6c3b..2a63878ba 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -1,14 +1,36 @@
# ImagePreview 图片预览
-### 引入
+### 介绍
-`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
+图片放大预览，支持函数调用和组件调用两种方式
+
+### 函数调用
+
+ImagePreview 是一个函数，调用函数后展示图片预览
+
+```js
+import { Dialog } from 'vant';
+
+ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
+```
+
+### 组件调用
+
+通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
```js
import Vue from 'vue';
import { ImagePreview } from 'vant';
+// 全局注册
Vue.use(ImagePreview);
+
+// 局部注册
+export default {
+ components: {
+ [ImagePreview.Component.name]: ImagePreview.Component,
+ },
+};
```
## 代码演示
@@ -19,8 +41,8 @@ Vue.use(ImagePreview);
```js
ImagePreview([
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
]);
```
@@ -31,13 +53,13 @@ ImagePreview([
```js
ImagePreview({
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
startPosition: 1,
onClose() {
// do something
- }
+ },
});
```
@@ -48,10 +70,10 @@ ImagePreview({
```js
ImagePreview({
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
- closeable: true
+ closeable: true,
});
```
@@ -62,10 +84,10 @@ ImagePreview({
```js
const instance = ImagePreview({
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
],
- asyncClose: true
+ asyncClose: true,
});
setTimeout(() => {
@@ -90,18 +112,18 @@ export default {
show: false,
index: 0,
images: [
- 'https://img.yzcdn.cn/1.jpg',
- 'https://img.yzcdn.cn/2.jpg'
- ]
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
+ ],
};
},
methods: {
onChange(index) {
this.index = index;
- }
- }
-}
+ },
+ },
+};
```
## API
@@ -111,55 +133,54 @@ export default {
通过函数调用 `ImagePreview` 时，支持传入以下选项：
| 参数名 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| images | 需要预览的图片 URL 数组 | *string[]* | `[]` |
-| startPosition | 图片预览起始位置索引 | *number \| string* | `0` |
-| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` |
-| showIndex | 是否显示页码 | *boolean* | `true` |
-| showIndicators | 是否显示轮播指示器 | *boolean* | `false` |
-| loop | 是否开启循环播放 | *boolean* | `true` |
-| onClose | 关闭时的回调函数 | *Function* | - |
-| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - |
-| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | *Function* | - |
-| asyncClose | 是否开启异步关闭 | *boolean* | `false` |
-| closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
-| className | 自定义类名 | *any* | - |
-| lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` |
-| maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` |
-| minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` |
-| closeable | 是否显示关闭图标 | *boolean* | `false` |
-| closeIcon | 关闭图标名称或图片链接 | *string* | `clear` |
-| closeIconPosition | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| startPosition | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipeDuration | 动画时长，单位为`ms` | _number \| string_ | `500` | +| showIndex | 是否显示页码 | _boolean_ | `true` | +| showIndicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| onClose | 关闭时的回调函数 | _Function_ | - | +| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - | +| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - | +| asyncClose | 是否开启异步关闭 | _boolean_ | `false` | +| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| className | 自定义类名 | _any_ | - | +| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable | 是否显示关闭图标 | _boolean_ | `false` | +| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` | +| closeIconPosition | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Props 通过组件调用 `ImagePreview` 时，支持以下 Props： | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| start-position | 图片预览起始位置索引 | *number \| string* | `0` | -| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` | -| show-index | 是否显示页码 | *boolean* | `true` | -| show-indicators | 是否显示轮播指示器 | *boolean* | `false` | -| loop | 是否开启循环播放 | *boolean* | `true` | -| async-close | 是否开启异步关闭 | *boolean* | `false` | -| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | -| class-name | 自定义类名 | *any* | - | -| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | -| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | -| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | -| closeable `v2.5.0` | 是否显示关闭图标 | *boolean* | `false` | -| close-icon `v2.5.0` | 关闭图标名称或图片链接 | *string* | `clear` | -| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| start-position | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipe-duration | 动画时长，单位为 ms | _number \| string_ | `500` | +| show-index | 是否显示页码 | _boolean_ | `true` | +| show-indicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| async-close | 是否开启异步关闭 | _boolean_ | `false` | +| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| class-name | 自定义类名 | _any_ | - | +| max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` | +| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` | +| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Events 通过组件调用 `ImagePreview` 时，支持以下事件： | 事件 | 说明 | 回调参数 | -|------|------|------| +| --- | --- | --- | | close | 关闭时触发 | { index: 索引, url: 图片链接 } | +| closed `v2.5.6` | 关闭且且动画结束后触发 | - | | change | 切换当前图片时触发 | index: 当前图片的索引 | | scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } | @@ -167,24 +188,24 @@ export default { 通过组件调用 `ImagePreview` 时，支持以下插槽： -| 名称 | 说明 | -|------|------| -| index | 自定义页码内容 | +| 名称 | 说明 | +| ----- | ------------------------------ | +| index | 自定义页码内容 | | cover | 自定义覆盖在图片预览上方的内容 | ### onClose 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| url | 当前图片 URL | *string* | -| index | 当前图片的索引值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| url | 当前图片 URL | _string_ | +| index | 当前图片的索引值 | _number_ | ### onScale 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| index | 当前图片的索引值 | *number* | -| scale | 当前图片的缩放值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| index | 当前图片的索引值 | _number_ | +| scale | 当前图片的缩放值 | _number_ | ## 常见问题 diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index f3ef3fa9e..ec4960fdb 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -1,35 +1,35 @@
-
+
- {{ $t('button1') }}
+ {{ t('button1') }}
-
+
- {{ $t('button2') }}
+ {{ t('button2') }}
-
+
- {{ $t('button4') }}
+ {{ t('button4') }}
-
+
- {{ $t('button3') }}
+ {{ t('button3') }}
-
+
- {{ $t('componentCall') }}
+ {{ t('componentCall') }}
- {{ $t('index', index) }}
+ {{ t('index', index) }}
@@ -53,7 +53,7 @@ export default {
button3: '异步关闭',
button4: '展示关闭按钮',
componentCall: '组件调用',
- index: index => `第${index + 1}页`,
+ index: (index) => `第${index + 1}页`,
},
'en-US': {
button1: 'Show Images',
@@ -61,7 +61,7 @@ export default {
button3: 'Async Close',
button4: 'Show Close Icon',
componentCall: 'Component Call',
- index: index => `Page: ${index}`,
+ index: (index) => `Page: ${index}`,
},
},
@@ -85,7 +85,6 @@ export default {
showImagePreview(position, timer, closeable) {
const instance = ImagePreview({
images,
- lazyLoad: true,
swipeDuration: 300,
asyncClose: !!timer,
closeable,
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index 172b8e4d8..83fe8edd8 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -13,7 +13,6 @@ const defaultConfig = {
className: '',
onClose: null,
onChange: null,
- lazyLoad: false,
showIndex: true,
closeable: false,
closeIcon: 'clear',
@@ -31,13 +30,13 @@ const initInstance = () => {
});
document.body.appendChild(instance.$el);
- instance.$on('change', index => {
+ instance.$on('change', (index) => {
if (instance.onChange) {
instance.onChange(index);
}
});
- instance.$on('scale', data => {
+ instance.$on('scale', (data) => {
if (instance.onScale) {
instance.onScale(data);
}
@@ -58,10 +57,14 @@ const ImagePreview = (images, startPosition = 0) => {
Object.assign(instance, defaultConfig, options);
- instance.$once('input', show => {
+ instance.$once('input', (show) => {
instance.value = show;
});
+ instance.$once('closed', () => {
+ instance.images = [];
+ });
+
if (options.onClose) {
instance.$off('close');
instance.$once('close', options.onClose);
@@ -70,6 +73,8 @@ const ImagePreview = (images, startPosition = 0) => {
return instance;
};
+ImagePreview.Component = VueImagePreview;
+
ImagePreview.install = () => {
Vue.use(VueImagePreview);
};
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 515c5e9f8..b4c5692e2 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -1,15 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`cover slot 1`] = `
-
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| startPosition | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipeDuration | 动画时长，单位为`ms` | _number \| string_ | `500` | +| showIndex | 是否显示页码 | _boolean_ | `true` | +| showIndicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| onClose | 关闭时的回调函数 | _Function_ | - | +| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - | +| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - | +| asyncClose | 是否开启异步关闭 | _boolean_ | `false` | +| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| className | 自定义类名 | _any_ | - | +| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable | 是否显示关闭图标 | _boolean_ | `false` | +| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` | +| closeIconPosition | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Props 通过组件调用 `ImagePreview` 时，支持以下 Props： | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| start-position | 图片预览起始位置索引 | *number \| string* | `0` | -| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` | -| show-index | 是否显示页码 | *boolean* | `true` | -| show-indicators | 是否显示轮播指示器 | *boolean* | `false` | -| loop | 是否开启循环播放 | *boolean* | `true` | -| async-close | 是否开启异步关闭 | *boolean* | `false` | -| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | -| class-name | 自定义类名 | *any* | - | -| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | -| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | -| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | -| closeable `v2.5.0` | 是否显示关闭图标 | *boolean* | `false` | -| close-icon `v2.5.0` | 关闭图标名称或图片链接 | *string* | `clear` | -| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| start-position | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipe-duration | 动画时长，单位为 ms | _number \| string_ | `500` | +| show-index | 是否显示页码 | _boolean_ | `true` | +| show-indicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| async-close | 是否开启异步关闭 | _boolean_ | `false` | +| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| class-name | 自定义类名 | _any_ | - | +| max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` | +| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` | +| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Events 通过组件调用 `ImagePreview` 时，支持以下事件： | 事件 | 说明 | 回调参数 | -|------|------|------| +| --- | --- | --- | | close | 关闭时触发 | { index: 索引, url: 图片链接 } | +| closed `v2.5.6` | 关闭且且动画结束后触发 | - | | change | 切换当前图片时触发 | index: 当前图片的索引 | | scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } | @@ -167,24 +188,24 @@ export default { 通过组件调用 `ImagePreview` 时，支持以下插槽： -| 名称 | 说明 | -|------|------| -| index | 自定义页码内容 | +| 名称 | 说明 | +| ----- | ------------------------------ | +| index | 自定义页码内容 | | cover | 自定义覆盖在图片预览上方的内容 | ### onClose 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| url | 当前图片 URL | *string* | -| index | 当前图片的索引值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| url | 当前图片 URL | _string_ | +| index | 当前图片的索引值 | _number_ | ### onScale 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| index | 当前图片的索引值 | *number* | -| scale | 当前图片的缩放值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| index | 当前图片的索引值 | _number_ | +| scale | 当前图片的缩放值 | _number_ | ## 常见问题 diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index f3ef3fa9e..ec4960fdb 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -1,35 +1,35 @@
-
-`;
-
exports[`close-icon prop 1`] = `
-
-
- 1 / 0
- Custom Cover Content
-
@@ -30,6 +20,16 @@ exports[`close-icon-position prop 1`] = `
`;
+exports[`cover slot 1`] = `
+
+
+`;
+
exports[`index slot 1`] = `
+
+
+ 1 / 0
+ Custom Cover Content
+
@@ -39,62 +39,13 @@ exports[`index slot 1`] = `
`;
-exports[`lazy-load prop 1`] = `
-
-
-`;
-
exports[`render image 1`] = `
-
-
-
-
- ![]()
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
1 / 3
-
-
- 
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
- 
-
-
+
+
+
-
-
-
-
1 / 3
@@ -110,32 +61,9 @@ exports[`set show-index prop to false 1`] = `
`;
exports[`zoom 1`] = `
-
-
-
+
`;
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 2b7c5834d..eb6a1f5e6 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -103,7 +103,7 @@ test('async close prop', async () => {
expect(wrapper.emitted('close')[0]).toBeTruthy();
});
-test('function call', done => {
+test('function call', (done) => {
ImagePreview(images);
ImagePreview(images.slice(0, 1));
Vue.nextTick(() => {
@@ -116,9 +116,10 @@ test('function call', done => {
});
});
-test('double click', async done => {
+test('double click', async (done) => {
const instance = ImagePreview(images);
+ await later();
const swipe = instance.$el.querySelector('.van-swipe__track');
triggerDrag(swipe, 0, 0);
triggerDrag(swipe, 0, 0);
@@ -149,7 +150,7 @@ test('onClose option', () => {
});
});
-test('onChange option', async done => {
+test('onChange option', async (done) => {
const instance = ImagePreview({
images,
startPostion: 0,
@@ -163,7 +164,7 @@ test('onChange option', async done => {
triggerDrag(swipe, 1000, 0);
});
-test('onScale option', async done => {
+test('onScale option', async (done) => {
const { getBoundingClientRect } = Element.prototype;
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
@@ -177,7 +178,8 @@ test('onScale option', async done => {
},
});
- const image = instance.$el.getElementsByTagName('img')[0];
+ await later();
+ const image = instance.$el.querySelector('img');
triggerZoom(image, 300, 300);
Element.prototype.getBoundingClientRect = getBoundingClientRect;
});
@@ -195,10 +197,12 @@ test('zoom', async () => {
propsData: { images, value: true },
});
- const image = wrapper.find('img');
+ await later();
+ const image = wrapper.find('.van-image');
triggerZoom(image, 300, 300);
triggerDrag(image, 300, 300);
- expect(wrapper).toMatchSnapshot();
+
+ expect(image).toMatchSnapshot();
Element.prototype.getBoundingClientRect = getBoundingClientRect;
});
@@ -258,17 +262,6 @@ test('closeOnPopstate', () => {
expect(wrapper.emitted('input')[1]).toBeFalsy();
});
-test('lazy-load prop', () => {
- const wrapper = mount(ImagePreviewVue, {
- propsData: {
- images,
- lazyLoad: true,
- },
- });
-
- wrapper.setProps({
- value: true,
- });
-
- expect(wrapper).toMatchSnapshot();
+test('ImagePreview.Component', () => {
+ expect(ImagePreview.Component).toEqual(ImagePreviewVue);
});
diff --git a/src/image/README.md b/src/image/README.md
index 101d86206..791cd823c 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -4,9 +4,9 @@
```js
import Vue from 'vue';
-import { Image } from 'vant';
+import { Image as VanImage } from 'vant';
-Vue.use(Image);
+Vue.use(VanImage);
```
## Usage
@@ -14,11 +14,7 @@ Vue.use(Image);
### Basic Usage
```html
- 作为标签名时无法渲染的问题，比如下面的写法：
+
+```html
+
+
+ {this.genHeader()}
+ {this.genRows()}
+ {this.genCancelText()}
+
+ );
+ },
+});
diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less
new file mode 100644
index 000000000..9adbadd1e
--- /dev/null
+++ b/src/share-sheet/index.less
@@ -0,0 +1,97 @@
+@import '../style/var';
+@import '../style/mixins/hairline';
+
+.van-share-sheet {
+ &__header {
+ padding: @share-sheet-header-padding;
+ text-align: center;
+ }
+
+ &__title {
+ margin-top: @padding-xs;
+ color: @share-sheet-title-color;
+ font-weight: normal;
+ font-size: @share-sheet-title-font-size;
+ line-height: @share-sheet-title-line-height;
+ }
+
+ &__description {
+ display: block;
+ margin-top: @padding-xs;
+ color: @share-sheet-description-color;
+ font-size: @share-sheet-description-font-size;
+ line-height: @share-sheet-description-line-height;
+ }
+
+ &__options {
+ position: relative;
+ display: flex;
+ padding: @padding-md 0 @padding-md @padding-lg;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+
+ &--border::before {
+ .hairline-top(@cell-border-color, @padding-md);
+ }
+
+ // fix right-padding issue for overflow-x element
+ // see: https://stackoverflow.com/questions/10054870
+ &::after {
+ display: block;
+ flex-shrink: 0;
+ width: @padding-lg;
+ content: '';
+ }
+ }
+
+ &__option {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: @share-sheet-option-margin-right;
+ cursor: pointer;
+ user-select: none;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ &:active {
+ opacity: @active-opacity;
+ }
+ }
+
+ &__icon {
+ width: @share-sheet-icon-size;
+ height: @share-sheet-icon-size;
+ }
+
+ &__name {
+ margin-top: @padding-xs;
+ color: @share-sheet-option-name-color;
+ font-size: @share-sheet-option-name-font-size;
+ }
+
+ &__cancel {
+ display: block;
+ width: 100%;
+ padding: 0;
+ font-size: @share-sheet-cancel-button-font-size;
+ line-height: @share-sheet-cancel-button-height;
+ text-align: center;
+ background: @share-sheet-cancel-button-background;
+ border: none;
+ cursor: pointer;
+
+ &::before {
+ display: block;
+ height: @padding-xs;
+ background-color: @background-color;
+ content: ' ';
+ }
+
+ &:active {
+ background-color: @active-color;
+ }
+ }
+}
diff --git a/src/share-sheet/test/__snapshots__/demo.spec.js.snap b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0e8949134
--- /dev/null
+++ b/src/share-sheet/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
```
@@ -68,45 +68,45 @@ import { Notify } from 'vant';
export default {
data() {
return {
- activeKey: 0
+ activeKey: 0,
};
},
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
- }
- }
-}
+ },
+ },
+};
```
## API
### Sidebar Props
-| Attribute | Description | Type | Default |
-|------|------|------|------|
-| v-model | Index of chosen item | *number \| string* | `0` |
+| Attribute | Description | Type | Default |
+| --------- | -------------------- | ------------------ | ------- |
+| v-model | Index of chosen item | _number \| string_ | `0` |
### Sidebar Events
-| Event | Description | Arguments |
-|------|------|------|
+| Event | Description | Arguments |
+| ------ | --------------------------- | ---------------------------- |
| change | Triggered when item changed | index: index of current item |
### SidebarItem Props
| Attribute | Description | Type | Default |
-|------|------|------|------|
-| title | Content | *string* | `''` |
-| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
-| info | Content of the badge | *number \| string* | `''` |
-| disabled `v2.2.0` | Whether to be disabled | *boolean* | `false` |
-| url | Link | *string* | - |
-| to `v2.0.4` | Target route of the link, same as to of vue-router | *string \| object* | - |
-| replace `v2.0.4` | If true, the navigation will not leave a history record | *boolean* | `false` |
+| --- | --- | --- | --- |
+| title | Content | _string_ | `''` |
+| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
+| badge `v2.5.6` | Content of the badge | _number \| string_ | `''` |
+| disabled `v2.2.0` | Whether to be disabled | _boolean_ | `false` |
+| url | Link | _string_ | - |
+| to `v2.0.4` | Target route of the link, same as to of vue-router | _string \| object_ | - |
+| replace `v2.0.4` | If true, the navigation will not leave a history record | _boolean_ | `false` |
### SidebarItem Events
-| Event | Description | Arguments |
-|------|------|------|
+| Event | Description | Arguments |
+| ----- | ------------------------- | ---------------------------- |
| click | Triggered when click item | index: index of current item |
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index eaf839f98..32a58d61d 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -28,21 +28,21 @@ Vue.use(SidebarItem);
export default {
data() {
return {
- activeKey: 0
+ activeKey: 0,
};
- }
+ },
};
```
-### 提示信息
+### 徽标提示
-设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
+设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标
```html
```
@@ -58,7 +58,6 @@ export default {
```
-
### 监听切换事件
设置`change`方法来监听切换导航项时的事件
@@ -77,45 +76,46 @@ import { Notify } from 'vant';
export default {
data() {
return {
- activeKey: 0
+ activeKey: 0,
};
},
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
- }
- }
-}
+ },
+ },
+};
```
## API
### Sidebar Props
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| v-model `v2.0.4` | 当前导航项的索引 | *number \| string* | `0` |
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------- | ---------------- | ------------------ | ------ |
+| v-model `v2.0.4` | 当前导航项的索引 | _number \| string_ | `0` |
### Sidebar Events
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
+| 事件名 | 说明 | 回调参数 |
+| ------ | ---------------- | ----------------------- |
| change | 切换导航项时触发 | index: 当前导航项的索引 |
### SidebarItem Props
| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| title | 内容 | *string* | `''` |
-| dot `v2.2.1` | 是否显示右上角小红点 | *boolean* | `false` |
-| info | 右上角徽标的内容 | *number \| string* | - |
-| disabled `v2.2.0` | 是否禁用该项 | *boolean* | `false` |
-| url | 点击后跳转的链接地址 | *string* | - |
-| to `v2.0.4` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
-| replace `v2.0.4` | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
+| --- | --- | --- | --- |
+| title | 内容 | _string_ | `''` |
+| dot `v2.2.1` | 是否显示右上角小红点 | _boolean_ | `false` |
+| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
+| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
+| disabled `v2.2.0` | 是否禁用该项 | _boolean_ | `false` |
+| url | 点击后跳转的链接地址 | _string_ | - |
+| to `v2.0.4` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
+| replace `v2.0.4` | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### SidebarItem Events
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击时触发 | index: 当前导航项的索引 |
+| 事件名 | 说明 | 回调参数 |
+| ------ | ---------- | ----------------------- |
+| click | 点击时触发 | index: 当前导航项的索引 |
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index 52c871cdd..5ab0d55f8 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -2,38 +2,38 @@
-
-
-
-
-
-
-
-
@@ -45,13 +45,13 @@ export default {
i18n: {
'zh-CN': {
title: '标签名',
- showInfo: '提示信息',
+ showBadge: '徽标提示',
disabled: '禁用选项',
changeEvent: '监听切换事件',
selectTip: '你切换到了',
},
'en-US': {
- showInfo: 'Show Info',
+ showBadge: 'Show Badge',
disabled: 'Disabled',
changeEvent: 'Change Event',
selectTip: 'You select ',
@@ -71,7 +71,7 @@ export default {
onChange(index) {
this.$notify({
type: 'primary',
- message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`,
+ message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
});
},
},
diff --git a/src/sidebar/index.less b/src/sidebar/index.less
index e0663ea25..ff09323c9 100644
--- a/src/sidebar/index.less
+++ b/src/sidebar/index.less
@@ -2,4 +2,6 @@
.van-sidebar {
width: @sidebar-width;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
index ced2ae01f..1a7caf7b3 100644
--- a/src/sidebar/test/__snapshots__/demo.spec.js.snap
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
- 1 / 3
+ {title &&
+ );
+ },
+
+ genOptions(options, showBorder) {
+ return (
+ {title}
} + {description && {description}} +
+ {options.map((option, index) => (
+
+ );
+ },
+
+ genRows() {
+ const { options } = this;
+ if (Array.isArray(options[0])) {
+ return options.map((item, index) => this.genOptions(item, index !== 0));
+ }
+ return this.genOptions(options);
+ },
+
+ genCancelText() {
+ const cancelText = isDef(this.cancelText) ? this.cancelText : t('cancel');
+
+ if (cancelText) {
+ return (
+
+ );
+ }
+ },
+ },
+
+ render() {
+ return (
+ {
+ this.onSelect(option, index);
+ }}
+ >
+ })
+ {option.name && {option.name}}
+
+ ))}
+
+
+`;
diff --git a/src/share-sheet/test/__snapshots__/index.spec.js.snap b/src/share-sheet/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..e5d794098
--- /dev/null
+++ b/src/share-sheet/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cancel-text prop 1`] = ``;
+
+exports[`description prop 1`] = ``;
+
+exports[`title & description slot 1`] = `
+
+`;
diff --git a/src/share-sheet/test/demo.spec.js b/src/share-sheet/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/share-sheet/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/share-sheet/test/index.spec.js b/src/share-sheet/test/index.spec.js
new file mode 100644
index 000000000..20b061dd3
--- /dev/null
+++ b/src/share-sheet/test/index.spec.js
@@ -0,0 +1,72 @@
+import ShareSheet from '..';
+import { mount } from '../../../test';
+
+test('cancel-text prop', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ cancelText: 'foo',
+ },
+ });
+
+ expect(wrapper.find('.van-share-sheet__cancel')).toMatchSnapshot();
+
+ wrapper.setProps({ cancelText: '' });
+ expect(wrapper.contains('.van-share-sheet__cancel')).toBeFalsy();
+});
+
+test('description prop', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ description: 'foo',
+ },
+ });
+
+ expect(wrapper.find('.van-share-sheet__description')).toMatchSnapshot();
+
+ wrapper.setProps({ description: '' });
+ expect(wrapper.contains('.van-share-sheet__description')).toBeFalsy();
+});
+
+test('select event', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ options: [{ icon: 'wechat', name: 'wechat' }],
+ },
+ });
+
+ wrapper.find('.van-share-sheet__option').trigger('click');
+ expect(wrapper.emitted('select')[0]).toEqual([
+ { icon: 'wechat', name: 'wechat' },
+ 0,
+ ]);
+});
+
+test('cancel event', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ },
+ });
+
+ wrapper.find('.van-share-sheet__cancel').trigger('click');
+
+ expect(wrapper.emitted('input')[0][0]).toEqual(false);
+ expect(wrapper.emitted('cancel')[0]).toBeTruthy();
+});
+
+test('title & description slot', () => {
+ const wrapper = mount(ShareSheet, {
+ propsData: {
+ value: true,
+ },
+ scopedSlots: {
+ title: () => 'Custom Title',
+ description: () => 'Custom Description',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 537d5d656..863a1fb5b 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, isDef } from '../utils';
import { ChildrenMixin } from '../mixins/relation';
import { route, routeProps } from '../utils/router';
import Info from '../info';
@@ -12,6 +12,7 @@ export default createComponent({
...routeProps,
dot: Boolean,
info: [Number, String],
+ badge: [Number, String],
title: String,
disabled: Boolean,
},
@@ -43,7 +44,11 @@ export default createComponent({
>
+
+
+
+
+ 显示分享面板
+
+
+
+
+
+
+ 显示分享面板
+
+
+
+
+
+
+ 显示分享面板
+
+
+
+
+
+
+ 显示分享面板
+
+
{this.title}
-
);
diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index 96a0839b4..296140dc7 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -26,19 +26,19 @@ Vue.use(SidebarItem);
export default {
data() {
return {
- activeKey: 0
+ activeKey: 0,
};
- }
+ },
};
```
-### Show Info
+### Show Badge
```html
