blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

chore: prettier evenything

Browse Source
This commit is contained in:
chenjiahan 2020-04-24 22:50:56 +08:00 committed by neverland
parent 0e481d51f2
commit 44fc8b065c
171 changed files with 2452 additions and 2451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/compiler.js
View File

@ -20,7 +20,7 @@ const exampleDir = path.resolve(__dirname, '../example/dist');
const baseCssPath = path.resolve(__dirname, '../packages/common/index.wxss'); const baseCssPath = path.resolve(__dirname, '../packages/common/index.wxss');
const lessCompiler = dist => const lessCompiler = (dist) =>
function compileLess() { function compileLess() {
return gulp return gulp
.src(`${src}/**/*.less`) .src(`${src}/**/*.less`)
@ -55,21 +55,21 @@ const copier = (dist, ext) =>
return gulp.src(`${src}/**/*.${ext}`).pipe(gulp.dest(dist)); return gulp.src(`${src}/**/*.${ext}`).pipe(gulp.dest(dist));
}; };
const staticCopier = dist => const staticCopier = (dist) =>
gulp.parallel( gulp.parallel(
copier(dist, 'wxml'), copier(dist, 'wxml'),
copier(dist, 'wxs'), copier(dist, 'wxs'),
copier(dist, 'json') copier(dist, 'json')
); );
const cleaner = path => const cleaner = (path) =>
function clean() { function clean() {
return exec(`npx rimraf ${path}`); return exec(`npx rimraf ${path}`);
}; };
const tasks = [ const tasks = [
['buildEs', esDir, esConfig], ['buildEs', esDir, esConfig],
['buildLib', libDir, libConfig] ['buildLib', libDir, libConfig],
].reduce((prev, [name, ...args]) => { ].reduce((prev, [name, ...args]) => {
prev[name] = gulp.series( prev[name] = gulp.series(
cleaner(...args), cleaner(...args),

4
build/dev.js
View File

@ -8,5 +8,5 @@ const gulpConfig = path.resolve(__dirname, './compiler.js');
serve({}, { config }); serve({}, { config });
const p = exec(`npx gulp -f ${gulpConfig} buildExample --color`); const p = exec(`npx gulp -f ${gulpConfig} buildExample --color`);
p.stdout.on('data', stdout => console.info(stdout)); p.stdout.on('data', (stdout) => console.info(stdout));
p.stderr.on('data', stderr => console.info(stderr)); p.stderr.on('data', (stderr) => console.info(stderr));

50
build/webpack.doc.dev.js
View File

@ -7,30 +7,30 @@ module.exports = {
mode: 'development', mode: 'development',
entry: { entry: {
'vant-docs': './docs/src/index.js', 'vant-docs': './docs/src/index.js',
'vant-preview': './docs/src/preview.js' 'vant-preview': './docs/src/preview.js',
}, },
output: { output: {
path: path.join(__dirname, '../docs/dist'), path: path.join(__dirname, '../docs/dist'),
publicPath: '/', publicPath: '/',
chunkFilename: 'async_[name].js' chunkFilename: 'async_[name].js',
}, },
stats: { stats: {
modules: false, modules: false,
children: false children: false,
}, },
serve: { serve: {
open: true, open: true,
host: '0.0.0.0', host: '0.0.0.0',
devMiddleware: { devMiddleware: {
logLevel: 'warn' logLevel: 'warn',
}, },
hotClient: { hotClient: {
logLevel: 'warn', logLevel: 'warn',
allEntries: true allEntries: true,
} },
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.css'] extensions: ['.js', '.vue', '.css'],
}, },
module: { module: {
rules: [ rules: [
@ -41,34 +41,26 @@ module.exports = {
loader: 'vue-loader', loader: 'vue-loader',
options: { options: {
compilerOptions: { compilerOptions: {
preserveWhitespace: false preserveWhitespace: false,
} },
} },
} },
] ],
}, },
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: /node_modules/,
use: 'babel-loader' use: 'babel-loader',
}, },
{ {
test: /\.(css|less)$/, test: /\.(css|less)$/,
use: [ use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
}, },
{ {
test: /\.md$/, test: /\.md$/,
use: [ use: ['vue-loader', '@vant/markdown-loader'],
'vue-loader', },
'@vant/markdown-loader' ],
]
}
]
}, },
plugins: [ plugins: [
new VueLoaderPlugin(), new VueLoaderPlugin(),
@ -77,13 +69,13 @@ module.exports = {
chunks: ['vant-docs'], chunks: ['vant-docs'],
template: 'docs/src/index.tpl', template: 'docs/src/index.tpl',
filename: 'index.html', filename: 'index.html',
inject: true inject: true,
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
chunks: ['vant-preview'], chunks: ['vant-preview'],
template: 'docs/src/index.tpl', template: 'docs/src/index.tpl',
filename: 'preview.html', filename: 'preview.html',
inject: true inject: true,
}) }),
] ],
}; };

4
build/webpack.doc.prd.js
View File

@ -9,6 +9,6 @@ module.exports = Object.assign(config, {
path: path.join(__dirname, '../docs/dist'), path: path.join(__dirname, '../docs/dist'),
publicPath: 'https://b.yzcdn.cn/vant-weapp/', publicPath: 'https://b.yzcdn.cn/vant-weapp/',
filename: '[name].[hash:8].js', filename: '[name].[hash:8].js',
chunkFilename: 'async_[name].[chunkhash:8].js' chunkFilename: 'async_[name].[chunkhash:8].js',
} },
}); });

50
docs/markdown/changelog.md
View File

@ -1,7 +1,7 @@
# 更新日志 # 更新日志
### [v1.2.2](https://github.com/youzan/vant-weapp/tree/v1.2.2) ### [v1.2.2](https://github.com/youzan/vant-weapp/tree/v1.2.2)
`2020-04-21` `2020-04-21`
**Features** **Features**
@ -16,6 +16,7 @@
- Field: 避免设置 showClear 为 undefined [\#3012](https://github.com/youzan/vant-weapp/pull/3012) - Field: 避免设置 showClear 为 undefined [\#3012](https://github.com/youzan/vant-weapp/pull/3012)
### [v1.2.1](https://github.com/youzan/vant-weapp/tree/v1.2.1) ### [v1.2.1](https://github.com/youzan/vant-weapp/tree/v1.2.1)
`2020-04-12` `2020-04-12`
**Features** **Features**
@ -30,6 +31,7 @@
- Field: 修复 autosize 属性 设置 max-height 不生效 [\#3007](https://github.com/youzan/vant-weapp/pull/3007) - Field: 修复 autosize 属性 设置 max-height 不生效 [\#3007](https://github.com/youzan/vant-weapp/pull/3007)
### [v1.2.0](https://github.com/youzan/vant-weapp/tree/v1.2.0) ### [v1.2.0](https://github.com/youzan/vant-weapp/tree/v1.2.0)
`2020-04-04` `2020-04-04`
**Features** **Features**
@ -50,20 +52,21 @@
- Tab: 修复 type 为 card 时 color 对边框无效 [\#2941](https://github.com/youzan/vant-weapp/pull/2941) - Tab: 修复 type 为 card 时 color 对边框无效 [\#2941](https://github.com/youzan/vant-weapp/pull/2941)
### [v1.1.0](https://github.com/youzan/vant-weapp/tree/v1.1.0) ### [v1.1.0](https://github.com/youzan/vant-weapp/tree/v1.1.0)
`2020-03-21` `2020-03-21`
**Features** **Features**
- 新增 Calendar 日历组件 [\#2894](https://github.com/youzan/vant-weapp/pull/2894) - 新增 Calendar 日历组件 [\#2894](https://github.com/youzan/vant-weapp/pull/2894)
- Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class [\#2882](https://github.com/youzan/vant-weapp/pull/2882) - Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class [\#2882](https://github.com/youzan/vant-weapp/pull/2882)
- Steps: 新增 click 事件 [\#2874](https://github.com/youzan/vant-weapp/pull/2874) - Steps: 新增 click 事件 [\#2874](https://github.com/youzan/vant-weapp/pull/2874)
- SideBar: 新增 title 插槽 [\#2873](https://github.com/youzan/vant-weapp/pull/2873) - SideBar: 新增 title 插槽 [\#2873](https://github.com/youzan/vant-weapp/pull/2873)
- Uploader: 新增 upload-icon 属性 [\#2869](https://github.com/youzan/vant-weapp/pull/2869) - Uploader: 新增 upload-icon 属性 [\#2869](https://github.com/youzan/vant-weapp/pull/2869)
- Uploader: 新增 show-upload 属性 [\#2868](https://github.com/youzan/vant-weapp/pull/2868) - Uploader: 新增 show-upload 属性 [\#2868](https://github.com/youzan/vant-weapp/pull/2868)
- Uploader: 更新样式、调整事件触发顺序与vant一致 [\#2886](https://github.com/youzan/vant-weapp/pull/2886) - Uploader: 更新样式、调整事件触发顺序与 vant 一致 [\#2886](https://github.com/youzan/vant-weapp/pull/2886)
- Field: 新增 show-word-limit 属性 [\#2856](https://github.com/youzan/vant-weapp/pull/2856) - Field: 新增 show-word-limit 属性 [\#2856](https://github.com/youzan/vant-weapp/pull/2856)
- Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight [\#2856](https://github.com/youzan/vant-weapp/pull/2856) - Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight [\#2856](https://github.com/youzan/vant-weapp/pull/2856)
- Field: 新增若干CSS变量 [\#2856](https://github.com/youzan/vant-weapp/pull/2856) - Field: 新增若干 CSS 变量 [\#2856](https://github.com/youzan/vant-weapp/pull/2856)
**Bug Fixes** **Bug Fixes**
@ -71,6 +74,7 @@
- Button: 修复 disabled 属性对原生事件无效 [\#2878](https://github.com/youzan/vant-weapp/pull/2878) - Button: 修复 disabled 属性对原生事件无效 [\#2878](https://github.com/youzan/vant-weapp/pull/2878)
### [v1.0.7](https://github.com/youzan/vant-weapp/tree/v1.0.7) ### [v1.0.7](https://github.com/youzan/vant-weapp/tree/v1.0.7)
`2020-03-04` `2020-03-04`
**Features** **Features**
@ -84,19 +88,20 @@
- Tab: 修复内容项高度不同时粘性布局异常 [\#2817](https://github.com/youzan/vant-weapp/pull/2817) - Tab: 修复内容项高度不同时粘性布局异常 [\#2817](https://github.com/youzan/vant-weapp/pull/2817)
- Picker: 修复未选中项样式未置灰 [\#2816](https://github.com/youzan/vant-weapp/pull/2816) - Picker: 修复未选中项样式未置灰 [\#2816](https://github.com/youzan/vant-weapp/pull/2816)
- GoodsActionButton: 修复仅使用一个button时样式异常 [\#2808](https://github.com/youzan/vant-weapp/pull/2808) - GoodsActionButton: 修复仅使用一个 button 时样式异常 [\#2808](https://github.com/youzan/vant-weapp/pull/2808)
- Radio: `name`类型与`value`统一 [\#2801](https://github.com/youzan/vant-weapp/pull/2801) - Radio: `name`类型与`value`统一 [\#2801](https://github.com/youzan/vant-weapp/pull/2801)
- Uploader: 修复文档错误 [\#2777](https://github.com/youzan/vant-weapp/pull/2777) - Uploader: 修复文档错误 [\#2777](https://github.com/youzan/vant-weapp/pull/2777)
### [v1.0.6](https://github.com/youzan/vant-weapp/tree/v1.0.6) ### [v1.0.6](https://github.com/youzan/vant-weapp/tree/v1.0.6)
`2020-02-24` `2020-02-24`
**Features** **Features**
- GoodsActionButton: 新增默认slot [\#2779](https://github.com/youzan/vant-weapp/pull/2779) - GoodsActionButton: 新增默认 slot [\#2779](https://github.com/youzan/vant-weapp/pull/2779)
- SubmitBar: 更新圆角样式 [\#2755](https://github.com/youzan/vant-weapp/pull/2755) - SubmitBar: 更新圆角样式 [\#2755](https://github.com/youzan/vant-weapp/pull/2755)
- Card: 更新样式 [\#2754](https://github.com/youzan/vant-weapp/pull/2754) - Card: 更新样式 [\#2754](https://github.com/youzan/vant-weapp/pull/2754)
- 优化relation部分代码 [\#2760](https://github.com/youzan/vant-weapp/pull/2760) - 优化 relation 部分代码 [\#2760](https://github.com/youzan/vant-weapp/pull/2760)
**Bug Fixes** **Bug Fixes**
@ -108,15 +113,16 @@
- Radio: 修复`label-disabled`文档错误 [\#2763](https://github.com/youzan/vant-weapp/pull/2763) - Radio: 修复`label-disabled`文档错误 [\#2763](https://github.com/youzan/vant-weapp/pull/2763)
### [v1.0.5](https://github.com/youzan/vant-weapp/tree/v1.0.5) ### [v1.0.5](https://github.com/youzan/vant-weapp/tree/v1.0.5)
`2020-02-07` `2020-02-07`
**Features** **Features**
- ActionSheet: actions 支持更多 openType [\#2715](https://github.com/youzan/vant-weapp/pull/2715) - ActionSheet: actions 支持更多 openType [\#2715](https://github.com/youzan/vant-weapp/pull/2715)
- Uploader: 新增开始`disabled`时的组件样式 [\#2720](https://github.com/youzan/vant-weapp/pull/2720) - Uploader: 新增开始`disabled`时的组件样式 [\#2720](https://github.com/youzan/vant-weapp/pull/2720)
- Icon: 调整示例小程序页面与vant对齐 [\#2728](https://github.com/youzan/vant-weapp/pull/2728) - Icon: 调整示例小程序页面与 vant 对齐 [\#2728](https://github.com/youzan/vant-weapp/pull/2728)
- 示例小程序首页与vant对齐 [\#2729](https://github.com/youzan/vant-weapp/pull/2729) - 示例小程序首页与 vant 对齐 [\#2729](https://github.com/youzan/vant-weapp/pull/2729)
- 完善快速上手文档，增加npm构建说明 [\#2726](https://github.com/youzan/vant-weapp/pull/2726) - 完善快速上手文档，增加 npm 构建说明 [\#2726](https://github.com/youzan/vant-weapp/pull/2726)
**Bug Fixes** **Bug Fixes**
@ -127,6 +133,7 @@
- TreeSelect: 修正文档示例代码标签闭合错误 [\#2710](https://github.com/youzan/vant-weapp/pull/2710) - TreeSelect: 修正文档示例代码标签闭合错误 [\#2710](https://github.com/youzan/vant-weapp/pull/2710)
### [v1.0.4](https://github.com/youzan/vant-weapp/tree/v1.0.4) ### [v1.0.4](https://github.com/youzan/vant-weapp/tree/v1.0.4)
`2020-01-21` `2020-01-21`
**Features** **Features**
@ -144,11 +151,12 @@
- 升级依赖版本以避免安全警告 [\#2680](https://github.com/youzan/vant-weapp/pull/2680) - 升级依赖版本以避免安全警告 [\#2680](https://github.com/youzan/vant-weapp/pull/2680)
### [v1.0.3](https://github.com/youzan/vant-weapp/tree/v1.0.3) ### [v1.0.3](https://github.com/youzan/vant-weapp/tree/v1.0.3)
`2020-01-09` `2020-01-09`
**Features** **Features**
- npm包默认输出es5版本代码 [\#2639](https://github.com/youzan/vant-weapp/pull/2639) - npm 包默认输出 es5 版本代码 [\#2639](https://github.com/youzan/vant-weapp/pull/2639)
- Steps: 新增外部样式类 desc-class [\#2630](https://github.com/youzan/vant-weapp/pull/2630) - Steps: 新增外部样式类 desc-class [\#2630](https://github.com/youzan/vant-weapp/pull/2630)
**Bug Fixes** **Bug Fixes**
@ -157,23 +165,26 @@
- NavBar: 修复返回图标未居中的问题 [\#2633](https://github.com/youzan/vant-weapp/pull/2633) - NavBar: 修复返回图标未居中的问题 [\#2633](https://github.com/youzan/vant-weapp/pull/2633)
### [v1.0.2](https://github.com/youzan/vant-weapp/tree/v1.0.2) ### [v1.0.2](https://github.com/youzan/vant-weapp/tree/v1.0.2)
`2019-12-31` `2019-12-31`
**Features** **Features**
- Skeleton: 新增外部样式类`row-class``avatar-class``title-class` [\#2612](https://github.com/youzan/vant-weapp/pull/2612) - Skeleton: 新增外部样式类` row-class``avatar-class``title-class ` [\#2612](https://github.com/youzan/vant-weapp/pull/2612)
- SwipeCell: 支持动态修改`width`属性 [\#2607](https://github.com/youzan/vant-weapp/pull/2607) - SwipeCell: 支持动态修改`width`属性 [\#2607](https://github.com/youzan/vant-weapp/pull/2607)
- Uploader: 新增`camera``compressed``maxDuration`属性 [\#2584](https://github.com/youzan/vant-weapp/pull/2584) - Uploader: 新增` camera``compressed``maxDuration `属性 [\#2584](https://github.com/youzan/vant-weapp/pull/2584)
**Improvements** **Improvements**
- Tab: 优化弹性滚动效果 [\#2606](https://github.com/youzan/vant-weapp/pull/2606) - Tab: 优化弹性滚动效果 [\#2606](https://github.com/youzan/vant-weapp/pull/2606)
**Bug Fixes** **Bug Fixes**
- IndexBar: 修复字母未全部定义时click事件报错 [\#2605](https://github.com/youzan/vant-weapp/pull/2605) - IndexBar: 修复字母未全部定义时 click 事件报错 [\#2605](https://github.com/youzan/vant-weapp/pull/2605)
- Field: 修复点击清除图标后下一次点击无效 [\#2602](https://github.com/youzan/vant-weapp/pull/2602) - Field: 修复点击清除图标后下一次点击无效 [\#2602](https://github.com/youzan/vant-weapp/pull/2602)
### [v1.0.1](https://github.com/youzan/vant-weapp/tree/v1.0.1) ### [v1.0.1](https://github.com/youzan/vant-weapp/tree/v1.0.1)
`2019-12-23` `2019-12-23`
**Features** **Features**
@ -195,6 +206,7 @@
- Uploader: 修复 capture 属性不生效 [\#2551](https://github.com/youzan/vant-weapp/pull/2551) - Uploader: 修复 capture 属性不生效 [\#2551](https://github.com/youzan/vant-weapp/pull/2551)
### [v1.0.0](https://github.com/youzan/vant-weapp/tree/v1.0.0) ### [v1.0.0](https://github.com/youzan/vant-weapp/tree/v1.0.0)
`2019-12-11` `2019-12-11`
#### 主要变动 #### 主要变动
@ -203,7 +215,7 @@
- 增加十一个新组件 - 增加十一个新组件
- 增加数十个 API - 增加数十个 API
- 所有组件支持通过`CSS自定义属性`自定义样式 - 所有组件支持通过`CSS自定义属性`自定义样式
- 使用`env()`重构iOS安全区域适配 - 使用`env()`重构 iOS 安全区域适配
- 调整部分 API 命名，废除少量 API - 调整部分 API 命名，废除少量 API
#### 新组件 #### 新组件
@ -230,9 +242,9 @@
微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。 微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。
微信小程序自定义组件的组件模型相当于一个简化版的 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-CN)，幸运的是，小程序也支持了 [CSS自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的特性。最终，我们基于CSS自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。 微信小程序自定义组件的组件模型相当于一个简化版的 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-CN)，幸运的是，小程序也支持了 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。
从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 [CSS组定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 进行样式定制，具体使用姿势可查看[相关文档](https://youzan.github.io/vant-weapp/#/theme) 从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 [CSS 组定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 进行样式定制，具体使用姿势可查看[相关文档](https://youzan.github.io/vant-weapp/#/theme)
![定制主题](https://img.yzcdn.cn/public_files/2019/06/11/9a066c1a212264c7ae56065e1f13d317.png) ![定制主题](https://img.yzcdn.cn/public_files/2019/06/11/9a066c1a212264c7ae56065e1f13d317.png)
@ -263,7 +275,7 @@
- 去除`transitionend`事件，新增 6 个事件 - 去除`transitionend`事件，新增 6 个事件
---- ---
#### 新特性 #### 新特性
@ -404,7 +416,7 @@
- 新增`input-width`属性 - 新增`input-width`属性
- 新增`button-size`属性 - 新增`button-size`属性
- 新增`decimalLength`属性 - 新增`decimalLength`属性
- 新增 disablePlus、disableMinus属性 - 新增 disablePlus、disableMinus 属性
##### Steps ##### Steps

4
docs/markdown/custom-style.md
View File

@ -35,8 +35,8 @@ Vant Weapp 的所有组件都开启了`addGlobalClass: true`以接受外部样
```js ```js
Component({ Component({
options: { options: {
styleIsolation: 'shared' styleIsolation: 'shared',
} },
}); });
``` ```

10
docs/markdown/intro.md
View File

@ -40,11 +40,11 @@ Vant Weapp 是移动端 Vue 组件库 [Vant](https://github.com/youzan/vant) 的
### 链接 ### 链接
* [意见反馈](https://github.com/youzan/vant-weapp/issues) - [意见反馈](https://github.com/youzan/vant-weapp/issues)
* [加入我们](https://job.youzan.com) - [加入我们](https://job.youzan.com)
* [更新日志](#/changelog) - [更新日志](#/changelog)
* [Vue 组件库](https://github.com/youzan/vant) - [Vue 组件库](https://github.com/youzan/vant)
* [React 组件库](https://www.youzanyun.com/zanui/zent) - [React 组件库](https://www.youzanyun.com/zanui/zent)
### 开源协议 ### 开源协议

1
docs/markdown/quickstart.md
View File

@ -44,7 +44,6 @@ npm i vant-weapp -S --production
} }
``` ```
### 步骤四 修改 app.json ### 步骤四 修改 app.json
将 app.json 中的 `"style": "v2"` 去除，小程序的[新版基础组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。 将 app.json 中的 `"style": "v2"` 去除，小程序的[新版基础组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

15
docs/markdown/theme.md
View File

@ -4,7 +4,7 @@
小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用与之配套的 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。 小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用与之配套的 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
Css变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。 Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
### 样式变量 ### 样式变量
@ -52,7 +52,7 @@ Page({
buttonStyle: ` buttonStyle: `
--button-border-radius: 10px; --button-border-radius: 10px;
--button-default-color: green; --button-default-color: green;
` `,
}, },
onLoad() { onLoad() {
@ -61,16 +61,16 @@ Page({
buttonStyle: ` buttonStyle: `
--button-border-radius: 2px; --button-border-radius: 2px;
--button-default-color: pink; --button-default-color: pink;
` `,
}); });
}, 2000); }, 2000);
} },
}); });
``` ```
### 定制多个组件的主题样式 ### 定制多个组件的主题样式
> 与单个组件的定制方式类似，只需用一个container节点包裹住需要定制的组件，并将 Css变量 设置在container节点上 > 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 Css 变量 设置在 container 节点上
```html ```html
<view class="container"> <view class="container">
@ -88,7 +88,7 @@ import Toast from 'path/to/vant-weapp/dist/toast/toast';
Page({ Page({
onClick() { onClick() {
Toast('我是提示文案，建议不超过十五字~'); Toast('我是提示文案，建议不超过十五字~');
} },
}); });
``` ```
@ -103,7 +103,7 @@ Page({
### 定制全局主题样式 ### 定制全局主题样式
> 在 app.wxss 中，写入 Css变量，即可对全局生效 > 在 app.wxss 中，写入 Css 变量，即可对全局生效
```less ```less
page { page {
@ -113,4 +113,3 @@ page {
--toast-background-color: pink; --toast-background-color: pink;
} }
``` ```

23
docs/src/App.vue
View File

@ -15,19 +15,13 @@
import pkgJson from '../../package.json'; import pkgJson from '../../package.json';
import docConfig, { github, versions } from './doc.config'; import docConfig, { github, versions } from './doc.config';
const UNSHARED = [ const UNSHARED = ['common', 'quickstart', 'changelog', 'intro', 'transition'];
'common',
'quickstart',
'changelog',
'intro',
'transition'
];
export default { export default {
data() { data() {
return { return {
github, github,
versions versions,
}; };
}, },
@ -40,7 +34,10 @@ export default {
let prefix = ''; let prefix = '';
const { path } = this.$route.meta; const { path } = this.$route.meta;
if (location.hostname === '0.0.0.0' || location.hostname === 'localhost') { if (
location.hostname === '0.0.0.0' ||
location.hostname === 'localhost'
) {
prefix = 'https://youzan.github.io'; prefix = 'https://youzan.github.io';
} }
@ -49,7 +46,7 @@ export default {
} }
return `./preview.html#${path}`; return `./preview.html#${path}`;
} },
}, },
methods: { methods: {
@ -57,15 +54,15 @@ export default {
if (version !== pkgJson.version) { if (version !== pkgJson.version) {
location.href = `https://youzan.github.io/vant-weapp/${version}`; location.href = `https://youzan.github.io/vant-weapp/${version}`;
} }
} },
} },
}; };
</script> </script>
<style lang="less"> <style lang="less">
.van-doc-intro { .van-doc-intro {
padding-top: 20px; padding-top: 20px;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
text-align: center; text-align: center;
&__logo { &__logo {

6
docs/src/Preview.vue
View File

@ -17,7 +17,7 @@
const PREFIX = 'https://img.yzcdn.cn/vant-weapp/'; const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
const MAP = { const MAP = {
index: 'index-20190715.png', index: 'index-20190715.png',
transition: 'transition-20180821.png' transition: 'transition-20180821.png',
}; };
export default { export default {
@ -27,8 +27,8 @@ export default {
}, },
image() { image() {
return PREFIX + (MAP[this.imageName] || MAP.index); return PREFIX + (MAP[this.imageName] || MAP.index);
} },
} },
}; };
</script> </script>

38
docs/src/doc.config.js
View File

@ -12,20 +12,20 @@ export default {
logo: { logo: {
image: 'https://img.yzcdn.cn/vant/logo.png', image: 'https://img.yzcdn.cn/vant/logo.png',
title: 'Vant Weapp', title: 'Vant Weapp',
href: '#/' href: '#/',
}, },
nav: { nav: {
logoLink: [ logoLink: [
{ {
image: 'https://img.yzcdn.cn/vant/vant-o.svg', image: 'https://img.yzcdn.cn/vant/vant-o.svg',
url: '/vant' url: '/vant',
}, },
{ {
image: 'https://img.yzcdn.cn/vant/logo/github.svg', image: 'https://img.yzcdn.cn/vant/logo/github.svg',
url: github url: github,
} },
] ],
} },
}, },
nav: [ nav: [
{ {
@ -36,39 +36,39 @@ export default {
{ {
path: '/intro', path: '/intro',
title: '介绍', title: '介绍',
md: true md: true,
}, },
{ {
path: '/quickstart', path: '/quickstart',
title: '快速上手', title: '快速上手',
md: true md: true,
}, },
{ {
path: '/changelog', path: '/changelog',
title: '更新日志', title: '更新日志',
md: true md: true,
}, },
{ {
path: '/common', path: '/common',
title: '内置样式' title: '内置样式',
}, },
{ {
path: '/custom-style', path: '/custom-style',
title: '样式覆盖', title: '样式覆盖',
md: true md: true,
}, },
{ {
path: '/theme', path: '/theme',
title: '定制主题', title: '定制主题',
md: true md: true,
} },
] ],
} },
] ],
}, },
{ {
name: '组件', name: '组件',
groups: components groups: components,
} },
] ],
}; };

8
docs/src/index.js
View File

@ -15,7 +15,7 @@ const router = new VueRouter({
} }
return { x: 0, y: 0 }; return { x: 0, y: 0 };
} },
}); });
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
@ -44,12 +44,12 @@ new Vue({
const el = document.querySelector(this.$route.hash); const el = document.querySelector(this.$route.hash);
if (el) { if (el) {
el.scrollIntoView({ el.scrollIntoView({
behavior: 'smooth' behavior: 'smooth',
}); });
} }
} }
}, 1000); }, 1000);
}, },
render: h => h(App), render: (h) => h(App),
router router,
}); });

2
docs/src/preview.js
View File

@ -5,5 +5,5 @@ Vue.config.productionTip = false;
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(Preview) render: (h) => h(Preview),
}); });

30
docs/src/router.js
View File

@ -4,23 +4,13 @@ const registerRoute = () => {
const route = [ const route = [
{ {
path: '*', path: '*',
redirect: to => `/intro` redirect: () => `/intro`,
} },
]; ];
const navs = docConfig.nav || []; const navs = docConfig.nav || [];
navs.forEach(nav => { function addRoute(page) {
if (nav.groups) {
nav.groups.forEach(group => {
group.list.forEach(page => addRoute(page));
});
} else {
addRoute(nav);
}
});
function addRoute(page, isComponent) {
let { path } = page; let { path } = page;
if (path) { if (path) {
path = path.replace('/', ''); path = path.replace('/', '');
@ -40,12 +30,22 @@ const registerRoute = () => {
path: `/${path}`, path: `/${path}`,
meta: { meta: {
path, path,
name: page.title name: page.title,
} },
}); });
} }
} }
navs.forEach((nav) => {
if (nav.groups) {
nav.groups.forEach((group) => {
group.list.forEach((page) => addRoute(page));
});
} else {
addRoute(nav);
}
});
return route; return route;
}; };

2
package.json
View File

@ -47,7 +47,7 @@
"@babel/preset-env": "^7.5.5", "@babel/preset-env": "^7.5.5",
"@vant/cli": "^1.0.3", "@vant/cli": "^1.0.3",
"@vant/doc": "^2.5.5", "@vant/doc": "^2.5.5",
"@vant/eslint-config": "^2.2.1", "@vant/eslint-config": "^2.2.2",
"@vant/icons": "1.2.0", "@vant/icons": "1.2.0",
"@vant/markdown-loader": "^2.3.0", "@vant/markdown-loader": "^2.3.0",
"@vant/stylelint-config": "^1.3.0", "@vant/stylelint-config": "^1.3.0",

85
packages/action-sheet/README.md
View File

@ -10,7 +10,6 @@
} }
``` ```
## 代码演示 ## 代码演示
### 基础用法 ### 基础用法
@ -32,17 +31,17 @@ Page({
show: false, show: false,
actions: [ actions: [
{ {
name: '选项' name: '选项',
}, },
{ {
name: '选项' name: '选项',
}, },
{ {
name: '选项', name: '选项',
subname: '副文本', subname: '副文本',
openType: 'share' openType: 'share',
} },
] ],
}, },
onClose() { onClose() {
@ -51,7 +50,7 @@ Page({
onSelect(event) { onSelect(event) {
console.log(event.detail); console.log(event.detail);
} },
}); });
``` ```
@ -74,10 +73,10 @@ Page({
actions: [ actions: [
{ name: '选项', color: '#07c160' }, { name: '选项', color: '#07c160' },
{ loading: true }, { loading: true },
{ name: '禁用选项', disabled: true } { name: '禁用选项', disabled: true },
] ],
} },
}) });
``` ```
### 展示取消按钮 ### 展示取消按钮
@ -133,7 +132,7 @@ Page({
show: false, show: false,
actions: [ actions: [
{ name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' }, { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
] ],
}, },
onClose() { onClose() {
@ -141,8 +140,8 @@ Page({
}, },
onGetUserInfo(e) { onGetUserInfo(e) {
console.log(e.detail) console.log(e.detail);
} },
}); });
``` ```
@ -151,29 +150,29 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| actions | 菜单选项 | *Array* | `[]` | - | | actions | 菜单选项 | _Array_ | `[]` | - |
| title | 标题 | *string* | - | - | | title | 标题 | _string_ | - | - |
| description | 选项上方的描述信息 | *string* | - | 1.0.0 | | description | 选项上方的描述信息 | _string_ | - | 1.0.0 |
| z-index | z-index 层级 | *number* | `100` | - | | z-index | z-index 层级 | _number_ | `100` | - |
| cancel-text | 取消按钮文字 | *string* | - | - | | cancel-text | 取消按钮文字 | _string_ | - | - |
| overlay | 是否显示遮罩层 | *boolean* | - | - | | overlay | 是否显示遮罩层 | _boolean_ | - | - |
| round | 是否显示圆角 | *boolean* | `true` | 1.0.0 | | round | 是否显示圆角 | _boolean_ | `true` | 1.0.0 |
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `true` | - | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` | - |
| close-on-click-overlay | 点击遮罩是否关闭菜单 | *boolean* | - | - | | close-on-click-overlay | 点击遮罩是否关闭菜单 | _boolean_ | - | - |
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` | - | | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | --- | --- | --- |
| bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 | | bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
| bind:close | 关闭时触发 | - | | bind:close | 关闭时触发 | - |
| bind:cancel | 取消按钮点击时触发 | - | | bind:cancel | 取消按钮点击时触发 | - |
| bind:click-overlay | 点击遮罩层时触发 | - | | bind:click-overlay | 点击遮罩层时触发 | - |
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，<a href="#/action-sheet#actions">openType</a>="getUserInfo"时有效 | - | | bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，<a href="#/action-sheet#actions">openType</a>="getUserInfo"时有效 | - |
| bind:contact | 客服消息回调，<a href="#/action-sheet#actions">openType</a>="contact"时有效 | - | | bind:contact | 客服消息回调，<a href="#/action-sheet#actions">openType</a>="contact"时有效 | - |
| bind:getphonenumber | 获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"时有效 | - | | bind:getphonenumber | 获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"时有效 | - |
| bind:error | 当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - | | bind:error | 当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
| bind:launchapp | 打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - | | bind:launchapp | 打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
| bind:opensetting | 在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>="openSetting"时有效 | - | | bind:opensetting | 在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>="openSetting"时有效 | - |
@ -183,18 +182,18 @@ Page({
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： `API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| 键名 | 说明 | 类型 | 默认值 | | 键名 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-----------| | --- | --- | --- | --- |
| name | 标题 | *string* | - | | name | 标题 | _string_ | - |
| subname | 二级标题 | *string* | - | | subname | 二级标题 | _string_ | - |
| color | 选项文字颜色 | *string* | - | | color | 选项文字颜色 | _string_ | - |
| loading | 是否为加载状态 | *boolean* | - | | loading | 是否为加载状态 | _boolean_ | - |
| disabled | 是否为禁用状态 | *boolean* | - | | disabled | 是否为禁用状态 | _boolean_ | - |
| className | 为对应列添加额外的 class 类名 | *string* | - | | className | 为对应列添加额外的 class 类名 | _string_ | - |
| openType | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | | openType | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | *string* | `en` | | lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | _string_ | `en` |
| sessionFrom | 会话来源，openType="contact"时有效 | *string* | - | | sessionFrom | 会话来源，openType="contact"时有效 | _string_ | - |
| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | *string* | 当前标题 | | sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | _string_ | 当前标题 |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | *string* | 当前分享路径 | | sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | _string_ | 当前分享路径 |
| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | *string* | 截图 | | sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | _string_ | 截图 |
| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | *string* | `false` | | showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | _string_ | `false` |
| appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp时有效 | *string* | - | | appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 | _string_ | - |

20
packages/action-sheet/index.ts
View File

@ -12,32 +12,32 @@ VantComponent({
description: String, description: String,
round: { round: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
zIndex: { zIndex: {
type: Number, type: Number,
value: 100 value: 100,
}, },
actions: { actions: {
type: Array, type: Array,
value: [] value: [],
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
closeOnClickAction: { closeOnClickAction: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
methods: { methods: {
@ -64,6 +64,6 @@ VantComponent({
onClickOverlay() { onClickOverlay() {
this.$emit('click-overlay'); this.$emit('click-overlay');
this.onClose(); this.onClose();
} },
} },
}); });

57
packages/area/README.md
View File

@ -14,7 +14,6 @@
} }
``` ```
## 代码演示 ## 代码演示
### 基础用法 ### 基础用法
@ -61,20 +60,22 @@
在小程序中使用云能力之前需要先调用`wx.could.init`方法完成云能力的初始化。 在小程序中使用云能力之前需要先调用`wx.could.init`方法完成云能力的初始化。
``` js ```js
const db = wx.cloud.database(); const db = wx.cloud.database();
db.collection('region').limit(1).get() db.collection('region')
.then(res => { .limit(1)
if (res.data && res.data.length > 0) { .get()
this.setData({ .then((res) => {
areaList: res.data[0] if (res.data && res.data.length > 0) {
}); this.setData({
} areaList: res.data[0],
}) });
.catch(err => { }
console.log(err); })
}); .catch((err) => {
console.log(err);
});
``` ```
## API ## API
@ -83,16 +84,16 @@ db.collection('region').limit(1).get()
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| value | 当前选中的省市区`code` | *string* | - | - | | value | 当前选中的省市区`code` | _string_ | - | - |
| title | 顶部栏标题 | *string* | - | - | | title | 顶部栏标题 | _string_ | - | - |
| area-list | 省市区数据，格式见下方 | *object* | - | - | | area-list | 省市区数据，格式见下方 | _object_ | - | - |
| columns-num | 省市区显示列数，3-省市区，2-省市，1-省 | *string \| number* | `3` | - | | columns-num | 省市区显示列数，3-省市区，2-省市，1-省 | _string \| number_ | `3` | - |
| columns-placeholder | 列占位提示文字 | *string[]* | `[]` | - | | columns-placeholder | 列占位提示文字 | _string[]_ | `[]` | - |
| loading | 是否显示加载状态 | *boolean* | `false` | - | | loading | 是否显示加载状态 | _boolean_ | `false` | - |
| item-height | 选项高度 | *number* | `44` | - | | item-height | 选项高度 | _number_ | `44` | - |
| visible-item-count | 可见的选项个数 | *number* | `5` | - | | visible-item-count | 可见的选项个数 | _number_ | `5` | - |
| confirm-button-text | 确认按钮文字 | *string* | `确认` | - | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | - |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | - | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | - |
### Events ### Events
@ -107,7 +108,7 @@ db.collection('region').limit(1).get()
通过 selectComponent 可以获取到 Area 实例并调用实例方法 通过 selectComponent 可以获取到 Area 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------| | --- | --- | --- | --- |
| reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 | | reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 |
### 省市区列表数据格式 ### 省市区列表数据格式
@ -159,16 +160,16 @@ db.collection('region').limit(1).get()
[ [
{ {
code: '110000', code: '110000',
name: '北京市' name: '北京市',
}, },
{ {
code: '110100', code: '110100',
name: '北京市' name: '北京市',
}, },
{ {
code: '110101', code: '110101',
name: '东城区' name: '东城区',
} },
]; ];
``` ```

41
packages/area/index.ts
View File

@ -24,16 +24,16 @@ VantComponent({
areaList: { areaList: {
type: Object, type: Object,
value: {}, value: {},
observer: 'setValues' observer: 'setValues',
}, },
columnsNum: { columnsNum: {
type: null, type: null,
value: 3, value: 3,
observer(value: number) { observer(value: number) {
this.setData({ this.setData({
displayColumns: this.data.columns.slice(0, +value) displayColumns: this.data.columns.slice(0, +value),
}); });
} },
}, },
columnsPlaceholder: { columnsPlaceholder: {
type: Array, type: Array,
@ -43,16 +43,16 @@ VantComponent({
province: val[0] || '', province: val[0] || '',
city: val[1] || '', city: val[1] || '',
county: val[2] || '', county: val[2] || '',
} },
}); });
} },
} },
}, },
data: { data: {
columns: [{ values: [] }, { values: [] }, { values: [] }], columns: [{ values: [] }, { values: [] }, { values: [] }],
displayColumns: [{ values: [] }, { values: [] }, { values: [] }], displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
typeToColumnsPlaceholder: {} typeToColumnsPlaceholder: {},
}, },
mounted() { mounted() {
@ -109,7 +109,7 @@ VantComponent({
this.$emit('change', { this.$emit('change', {
picker, picker,
values: this.parseOutputValues(picker.getValues()), values: this.parseOutputValues(picker.getValues()),
index index,
}); });
}); });
}, },
@ -127,9 +127,9 @@ VantComponent({
} }
const list = this.getConfig(type); const list = this.getConfig(type);
result = Object.keys(list).map(code => ({ result = Object.keys(list).map((code) => ({
code, code,
name: list[code] name: list[code],
})); }));
if (code) { if (code) {
@ -138,15 +138,20 @@ VantComponent({
code = '9'; code = '9';
} }
result = result.filter(item => item.code.indexOf(code) === 0); result = result.filter((item) => item.code.indexOf(code) === 0);
} }
if (typeToColumnsPlaceholder[type] && result.length) { if (typeToColumnsPlaceholder[type] && result.length) {
// set columns placeholder // set columns placeholder
const codeFill = type === 'province' ? '' : type === 'city' ? COLUMNSPLACEHOLDERCODE.slice(2, 4) : COLUMNSPLACEHOLDERCODE.slice(4, 6); const codeFill =
type === 'province'
? ''
: type === 'city'
? COLUMNSPLACEHOLDERCODE.slice(2, 4)
: COLUMNSPLACEHOLDERCODE.slice(4, 6);
result.unshift({ result.unshift({
code: `${code}${codeFill}`, code: `${code}${codeFill}`,
name: typeToColumnsPlaceholder[type] name: typeToColumnsPlaceholder[type],
}); });
} }
@ -218,7 +223,7 @@ VantComponent({
picker.setIndexes([ picker.setIndexes([
this.getIndex('province', code), this.getIndex('province', code),
this.getIndex('city', code), this.getIndex('city', code),
this.getIndex('county', code) this.getIndex('county', code),
]) ])
) )
.catch(() => {}); .catch(() => {});
@ -226,7 +231,7 @@ VantComponent({
getValues() { getValues() {
const picker = this.getPicker(); const picker = this.getPicker();
return picker ? picker.getValues().filter(value => !!value) : []; return picker ? picker.getValues().filter((value) => !!value) : [];
}, },
getDetail() { getDetail() {
@ -236,7 +241,7 @@ VantComponent({
country: '', country: '',
province: '', province: '',
city: '', city: '',
county: '' county: '',
}; };
if (!values.length) { if (!values.length) {
@ -260,6 +265,6 @@ VantComponent({
reset(code) { reset(code) {
this.code = code || ''; this.code = code || '';
return this.setValues(); return this.setValues();
} },
} },
}); });

68
packages/button/README.md
View File

@ -73,7 +73,9 @@
```html ```html
<van-button icon="star-o" type="primary" /> <van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button> <van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button> <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">
按钮
</van-button>
``` ```
### 按钮尺寸 ### 按钮尺寸
@ -102,7 +104,9 @@
```html ```html
<van-button color="#7232dd">单色按钮</van-button> <van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button> <van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
渐变色按钮
</van-button>
``` ```
## API ## API
@ -110,37 +114,37 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| id | 标识符 | *string* | - | - | | id | 标识符 | _string_ | - | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | - | | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | - |
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | *string* | `normal` | - | | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - |
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | 1.0.0 | | color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | 1.0.0 |
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - | - | | icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| plain | 是否为朴素按钮 | *boolean* | `false` | - | | plain | 是否为朴素按钮 | _boolean_ | `false` | - |
| block | 是否为块级元素 | *boolean* | `false` | - | | block | 是否为块级元素 | _boolean_ | `false` | - |
| round | 是否为圆形按钮 | *boolean* | `false` | - | | round | 是否为圆形按钮 | _boolean_ | `false` | - |
| square | 是否为方形按钮 | *boolean* | `false` | - | | square | 是否为方形按钮 | _boolean_ | `false` | - |
| disabled | 是否禁用按钮 | *boolean* | `false` | - | | disabled | 是否禁用按钮 | _boolean_ | `false` | - |
| hairline | 是否使用 0.5px 边框 | *boolean* | `false` | - | | hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | - |
| loading | 是否显示为加载状态 | *boolean* | `false` | - | | loading | 是否显示为加载状态 | _boolean_ | `false` | - |
| loading-text | 加载状态提示文字 | *string* | - | - | | loading-text | 加载状态提示文字 | _string_ | - | - |
| loading-type | 加载状态图标类型，可选值为 `spinner` | *string* | `circular` | - | | loading-type | 加载状态图标类型，可选值为 `spinner` | _string_ | `circular` | - |
| loading-size | 加载图标大小 | *string* | `20px` | - | | loading-size | 加载图标大小 | _string_ | `20px` | - |
| custom-style | 自定义样式 | *string* | - | - | | custom-style | 自定义样式 | _string_ | - | - |
| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - | | open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
| app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | - | | app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | - | - | | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | - | - |
| session-from | 会话来源 | *string* | - | - | | session-from | 会话来源 | _string_ | - | - |
| business-id | 客服消息子商户 id | *number* | - | - | | business-id | 客服消息子商户 id | _number_ | - | - |
| send-message-title | 会话内消息卡片标题 | *string* | 当前标题 | - | | send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | - | | send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - |
| send-message-img | sendMessageImg | *string* | 截图 | - | | send-message-img | sendMessageImg | _string_ | 截图 | - |
| show-message-card | 显示会话内消息卡片 | *string* | `false` | - | | show-message-card | 显示会话内消息卡片 | _string_ | `false` | - |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | --- | --- | --- |
| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - | | bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - |
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | | bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
| bind:contact | 客服消息回调 | - | | bind:contact | 客服消息回调 | - |
@ -152,7 +156,7 @@
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------- | -------------- |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| loading-class | 加载图标样式类 | | loading-class | 加载图标样式类 |

18
packages/button/index.ts
View File

@ -8,7 +8,7 @@ VantComponent({
classes: ['hover-class', 'loading-class'], classes: ['hover-class', 'loading-class'],
data: { data: {
baseStyle: '' baseStyle: '',
}, },
props: { props: {
@ -24,19 +24,19 @@ VantComponent({
customStyle: String, customStyle: String,
loadingType: { loadingType: {
type: String, type: String,
value: 'circular' value: 'circular',
}, },
type: { type: {
type: String, type: String,
value: 'default' value: 'default',
}, },
size: { size: {
type: String, type: String,
value: 'normal' value: 'normal',
}, },
loadingSize: { loadingSize: {
type: String, type: String,
value: '20px' value: '20px',
}, },
color: { color: {
type: String, type: String,
@ -62,8 +62,8 @@ VantComponent({
if (style !== this.data.baseStyle) { if (style !== this.data.baseStyle) {
this.setData({ baseStyle: style }); this.setData({ baseStyle: style });
} }
} },
} },
}, },
methods: { methods: {
@ -73,6 +73,6 @@ VantComponent({
} }
}, },
noop() {} noop() {},
} },
}); });

114
packages/calendar/README.md
View File

@ -25,7 +25,7 @@
Page({ Page({
data: { data: {
date: '', date: '',
show: false show: false,
}, },
onDisplay() { onDisplay() {
@ -41,9 +41,9 @@ Page({
onConfirm(event) { onConfirm(event) {
this.setData({ this.setData({
show: false, show: false,
date: this.formatDate(event.detail) date: this.formatDate(event.detail),
}); });
} },
}); });
``` ```
@ -65,7 +65,7 @@ Page({
Page({ Page({
data: { data: {
text: '', text: '',
show: false show: false,
}, },
onDisplay() { onDisplay() {
@ -77,9 +77,9 @@ Page({
onConfirm(event) { onConfirm(event) {
this.setData({ this.setData({
show: false, show: false,
date: `选择了 ${event.detail.length} 个日期` date: `选择了 ${event.detail.length} 个日期`,
}); });
} },
}); });
``` ```
@ -101,7 +101,7 @@ Page({
Page({ Page({
data: { data: {
date: '', date: '',
show: false show: false,
}, },
onDisplay() { onDisplay() {
@ -118,9 +118,9 @@ Page({
const [start, end] = event.detail; const [start, end] = event.detail;
this.setData({ this.setData({
show: false, show: false,
date: `${this.formatDate(start)} - ${this.formatDate(end)}` date: `${this.formatDate(start)} - ${this.formatDate(end)}`,
}); });
} },
}); });
``` ```
@ -157,8 +157,8 @@ Page({
data: { data: {
show: false, show: false,
minDate: new Date(2010, 0, 1).getTime(), minDate: new Date(2010, 0, 1).getTime(),
maxDate: new Date(2010, 0, 31).getTime() maxDate: new Date(2010, 0, 31).getTime(),
} },
}); });
``` ```
@ -207,8 +207,8 @@ Page({
} }
return day; return day;
} },
} },
}); });
``` ```
@ -251,69 +251,69 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --------------------- | -------------------------------------------------------------------------------------------------- | -------------------- | ------------------ | | --- | --- | --- | --- |
| type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` | | type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
| title | 日历标题 | _string_ | `日期选择` | | title | 日历标题 | _string_ | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` | | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| min-date | 可选择的最小日期 | _number_ | 当前日期 | | min-date | 可选择的最小日期 | _number_ | 当前日期 |
| max-date | 可选择的最大日期 | _number_ | 当前日期的六个月后 | | max-date | 可选择的最大日期 | _number_ | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _number \| number[]_ | 今天 | | default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _number \| number[]_ | 今天 |
| row-height | 日期行高 | _number \| string_ | `64` | | row-height | 日期行高 | _number \| string_ | `64` |
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - | | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` | | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` | | show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
| show-title | 是否展示日历标题 | _boolean_ | `true` | | show-title | 是否展示日历标题 | _boolean_ | `true` |
| show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` | | show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` |
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` | | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
| confirm-text | 确认按钮的文字 | _string_ | `确定` | | confirm-text | 确认按钮的文字 | _string_ | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` | | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
### Poppable Props ### Poppable Props
当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props: 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | --------------------------------------- | --------- | -------- | | --- | --- | --- | --- |
| show | 是否显示日历弹窗 | _boolean_ | `false` | | show | 是否显示日历弹窗 | _boolean_ | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` | | position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
| round | 是否显示圆角弹窗 | _boolean_ | `true` | | round | 是否显示圆角弹窗 | _boolean_ | `true` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` | | safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` |
### Range Props ### Range Props
当 Canlendar 的 `type` 为 `range` 时，支持以下 props: 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------------------ | ------------------ | ------------------------ | | --- | --- | --- | --- |
| max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - | | max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
| range-prompt | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` | | range-prompt | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
| allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` | | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
### Day 数据结构 ### Day 数据结构
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| ---------- | ------------------------------------------------------------------ | -------- | | --- | --- | --- |
| date | 日期对应的 Date 对象 | _Date_ | | date | 日期对应的 Date 对象 | _Date_ |
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ | | type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | 中间显示的文字 | _string_ | | text | 中间显示的文字 | _string_ |
| topInfo | 上方的提示信息 | _string_ | | topInfo | 上方的提示信息 | _string_ |
| bottomInfo | 下方的提示信息 | _string_ | | bottomInfo | 下方的提示信息 | _string_ |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| ------- | ------------------------------------------------------------------ | ----------------------- | | --- | --- | --- |
| select | 点击任意日期时触发 | _value: Date \| Date[]_ | | select | 点击任意日期时触发 | _value: Date \| Date[]_ |
| unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ | | unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | | confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
| open | 打开弹出层时触发 | - | | open | 打开弹出层时触发 | - |
| close | 关闭弹出层时触发 | - | | close | 关闭弹出层时触发 | - |
| opened | 打开弹出层且动画结束后触发 | - | | opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - | | closed | 关闭弹出层且动画结束后触发 | - |
### Slots ### Slots

8
packages/calendar/components/header/index.ts
View File

@ -4,16 +4,16 @@ VantComponent({
props: { props: {
title: { title: {
type: String, type: String,
value: '日期选择' value: '日期选择',
}, },
subtitle: String, subtitle: String,
showTitle: Boolean, showTitle: Boolean,
showSubtitle: Boolean showSubtitle: Boolean,
}, },
data: { data: {
weekdays: ['日', '一', '二', '三', '四', '五', '六'] weekdays: ['日', '一', '二', '三', '四', '五', '六'],
}, },
methods: {} methods: {},
}); });

28
packages/calendar/components/month/index.ts
View File

@ -3,46 +3,46 @@ import {
getMonthEndDay, getMonthEndDay,
compareDay, compareDay,
getPrevDay, getPrevDay,
getNextDay getNextDay,
} from '../../utils'; } from '../../utils';
VantComponent({ VantComponent({
props: { props: {
date: { date: {
type: null, type: null,
observer: 'setDays' observer: 'setDays',
}, },
type: { type: {
type: String, type: String,
observer: 'setDays' observer: 'setDays',
}, },
color: String, color: String,
minDate: { minDate: {
type: null, type: null,
observer: 'setDays' observer: 'setDays',
}, },
maxDate: { maxDate: {
type: null, type: null,
observer: 'setDays' observer: 'setDays',
}, },
showMark: Boolean, showMark: Boolean,
rowHeight: [Number, String], rowHeight: [Number, String],
formatter: { formatter: {
type: null, type: null,
observer: 'setDays' observer: 'setDays',
}, },
currentDate: { currentDate: {
type: [null, Array], type: [null, Array],
observer: 'setDays' observer: 'setDays',
}, },
allowSameDay: Boolean, allowSameDay: Boolean,
showSubtitle: Boolean, showSubtitle: Boolean,
showMonthTitle: Boolean showMonthTitle: Boolean,
}, },
data: { data: {
visible: true, visible: true,
days: [] days: [],
}, },
methods: { methods: {
@ -73,7 +73,7 @@ VantComponent({
date, date,
type, type,
text: day, text: day,
bottomInfo: this.getBottomInfo(type) bottomInfo: this.getBottomInfo(type),
}; };
if (this.data.formatter) { if (this.data.formatter) {
@ -92,8 +92,8 @@ VantComponent({
return ''; return '';
} }
const isSelected = date => const isSelected = (date) =>
currentDate.some(item => compareDay(item, date) === 0); currentDate.some((item) => compareDay(item, date) === 0);
if (isSelected(day)) { if (isSelected(day)) {
const prevDay = getPrevDay(day); const prevDay = getPrevDay(day);
@ -185,6 +185,6 @@ VantComponent({
return '开始/结束'; return '开始/结束';
} }
} }
} },
} },
}); });

67
packages/calendar/index.ts
View File

@ -8,7 +8,7 @@ import {
formatMonthTitle, formatMonthTitle,
compareMonth, compareMonth,
getMonths, getMonths,
getDayByOffset getDayByOffset,
} from './utils'; } from './utils';
import Toast from '../toast/toast'; import Toast from '../toast/toast';
@ -17,7 +17,7 @@ VantComponent({
props: { props: {
title: { title: {
type: String, type: String,
value: '日期选择' value: '日期选择',
}, },
color: String, color: String,
show: { show: {
@ -27,12 +27,12 @@ VantComponent({
this.initRect(); this.initRect();
this.scrollIntoView(); this.scrollIntoView();
} }
} },
}, },
formatter: null, formatter: null,
confirmText: { confirmText: {
type: String, type: String,
value: '确定' value: '确定',
}, },
rangePrompt: String, rangePrompt: String,
defaultDate: { defaultDate: {
@ -40,18 +40,18 @@ VantComponent({
observer(val) { observer(val) {
this.setData({ currentDate: val }); this.setData({ currentDate: val });
this.scrollIntoView(); this.scrollIntoView();
} },
}, },
allowSameDay: Boolean, allowSameDay: Boolean,
confirmDisabledText: String, confirmDisabledText: String,
type: { type: {
type: String, type: String,
value: 'single', value: 'single',
observer: 'reset' observer: 'reset',
}, },
minDate: { minDate: {
type: null, type: null,
value: Date.now() value: Date.now(),
}, },
maxDate: { maxDate: {
type: null, type: null,
@ -59,63 +59,63 @@ VantComponent({
new Date().getFullYear(), new Date().getFullYear(),
new Date().getMonth() + 6, new Date().getMonth() + 6,
new Date().getDate() new Date().getDate()
).getTime() ).getTime(),
}, },
position: { position: {
type: String, type: String,
value: 'bottom' value: 'bottom',
}, },
rowHeight: { rowHeight: {
type: [Number, String], type: [Number, String],
value: ROW_HEIGHT value: ROW_HEIGHT,
}, },
round: { round: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
poppable: { poppable: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
showMark: { showMark: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
showTitle: { showTitle: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
showConfirm: { showConfirm: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
showSubtitle: { showSubtitle: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
maxRange: { maxRange: {
type: [Number, String], type: [Number, String],
value: null value: null,
} },
}, },
data: { data: {
subtitle: '', subtitle: '',
currentDate: null, currentDate: null,
scrollIntoView: '' scrollIntoView: '',
}, },
created() { created() {
this.setData({ this.setData({
currentDate: this.getInitialDate() currentDate: this.getInitialDate(),
}); });
}, },
@ -139,13 +139,13 @@ VantComponent({
const contentObserver = this.createIntersectionObserver({ const contentObserver = this.createIntersectionObserver({
thresholds: [0, 0.1, 0.9, 1], thresholds: [0, 0.1, 0.9, 1],
observeAll: true observeAll: true,
}); });
this.contentObserver = contentObserver; this.contentObserver = contentObserver;
contentObserver.relativeTo('.van-calendar__body'); contentObserver.relativeTo('.van-calendar__body');
contentObserver.observe('.month', res => { contentObserver.observe('.month', (res) => {
if (res.boundingClientRect.top <= res.relativeRect.top) { if (res.boundingClientRect.top <= res.relativeRect.top) {
// @ts-ignore // @ts-ignore
this.setData({ subtitle: formatMonthTitle(res.dataset.date) }); this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
@ -160,7 +160,7 @@ VantComponent({
const [startDay, endDay] = defaultDate || []; const [startDay, endDay] = defaultDate || [];
return [ return [
startDay || minDate, startDay || minDate,
endDay || getNextDay(new Date(minDate)).getTime() endDay || getNextDay(new Date(minDate)).getTime(),
]; ];
} }
@ -179,7 +179,7 @@ VantComponent({
show, show,
poppable, poppable,
minDate, minDate,
maxDate maxDate,
} = this.data; } = this.data;
const targetDate = type === 'single' ? currentDate : currentDate[0]; const targetDate = type === 'single' ? currentDate : currentDate[0];
const displayed = show || !poppable; const displayed = show || !poppable;
@ -273,7 +273,10 @@ VantComponent({
if (!valid) { if (!valid) {
// auto selected to max range if showConfirm // auto selected to max range if showConfirm
if (this.data.showConfirm) { if (this.data.showConfirm) {
this.emit([date[0], getDayByOffset(date[0], this.data.maxRange - 1)]); this.emit([
date[0],
getDayByOffset(date[0], this.data.maxRange - 1),
]);
} else { } else {
this.emit(date); this.emit(date);
} }
@ -290,10 +293,10 @@ VantComponent({
emit(date) { emit(date) {
const getTime = (date: Date | number) => const getTime = (date: Date | number) =>
(date instanceof Date ? date.getTime() : date); date instanceof Date ? date.getTime() : date;
this.setData({ this.setData({
currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date) currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
}); });
this.$emit('select', copyDates(date)); this.$emit('select', copyDates(date));
}, },
@ -304,7 +307,7 @@ VantComponent({
if (maxRange && calcDateNum(date) > maxRange) { if (maxRange && calcDateNum(date) > maxRange) {
Toast({ Toast({
context: this, context: this,
message: rangePrompt || `选择天数不能超过 ${maxRange} 天` message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
}); });
return false; return false;
} }
@ -319,6 +322,6 @@ VantComponent({
wx.nextTick(() => { wx.nextTick(() => {
this.$emit('confirm', copyDates(this.data.currentDate)); this.$emit('confirm', copyDates(this.data.currentDate));
}); });
} },
} },
}); });

2
packages/calendar/utils.ts
View File

@ -72,7 +72,7 @@ export function calcDateNum(date: [Date, Date]) {
export function copyDates(dates: Date | Date[]) { export function copyDates(dates: Date | Date[]) {
if (Array.isArray(dates)) { if (Array.isArray(dates)) {
return dates.map(date => { return dates.map((date) => {
if (date === null) { if (date === null) {
return date; return date;
} }

66
packages/card/README.md
View File

@ -49,43 +49,43 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| thumb | 左侧图片 | *string* | - | - | | thumb | 左侧图片 | _string_ | - | - |
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | *string* | `aspectFit` | - | | thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_ | `aspectFit` | - |
| title | 标题 | *string* | - | - | | title | 标题 | _string_ | - | - |
| desc | 描述 | *string* | - | - | | desc | 描述 | _string_ | - | - |
| tag | 标签 | *string* | - | - | | tag | 标签 | _string_ | - | - |
| num | 商品数量 | *string \| number* | - | - | | num | 商品数量 | _string \| number_ | - | - |
| price | 商品价格 | *string \| number* | - | - | | price | 商品价格 | _string \| number_ | - | - |
| origin-price | 商品划线原价 | *string \| number* | - | - | | origin-price | 商品划线原价 | _string \| number_ | - | - |
| centered | 内容是否垂直居中 | *string* | `false` | - | | centered | 内容是否垂直居中 | _string_ | `false` | - |
| currency | 货币符号 | *string* | `¥` | - | | currency | 货币符号 | _string_ | `¥` | - |
| thumb-link | 点击左侧图片后跳转的链接地址 | *string* | - | - | | thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
| lazy-load | 是否开启图片懒加载 | *boolean* | `false` | - | | lazy-load | 是否开启图片懒加载 | _boolean_ | `false` | - |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | --------- | ------------------------------------------- |
| title | 自定义标题栏，如果设置了`title`属性则不生效 | | title | 自定义标题栏，如果设置了`title`属性则不生效 |
| desc | 自定义描述栏，如果设置了`desc`属性则不生效 | | desc | 自定义描述栏，如果设置了`desc`属性则不生效 |
| price-top | 自定义价格上方区域 | | price-top | 自定义价格上方区域 |
| price | 自定义价格 | | price | 自定义价格 |
| num | 自定义数量 | | num | 自定义数量 |
| thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 | | thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
| bottom | 自定义价格下方区域 | | bottom | 自定义价格下方区域 |
| footer | 自定义 footer | | footer | 自定义 footer |
| tags | 自定义 tags | | tags | 自定义 tags |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------------ | -------------- |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| thumb-class | 左侧图片样式类 | | thumb-class | 左侧图片样式类 |
| title-class | 标题样式类 | | title-class | 标题样式类 |
| price-class | 价格样式类 | | price-class | 价格样式类 |
| origin-price-class | 划线原价样式类 | | origin-price-class | 划线原价样式类 |
| desc-class | 描述样式类 | | desc-class | 描述样式类 |
| num-class | 数量样式类 | | num-class | 数量样式类 |

16
packages/card/index.ts
View File

@ -8,7 +8,7 @@ VantComponent({
'thumb-class', 'thumb-class',
'title-class', 'title-class',
'price-class', 'price-class',
'origin-price-class' 'origin-price-class',
], ],
mixins: [link], mixins: [link],
@ -21,7 +21,7 @@ VantComponent({
title: String, title: String,
price: { price: {
type: String, type: String,
observer: 'updatePrice' observer: 'updatePrice',
}, },
centered: Boolean, centered: Boolean,
lazyLoad: Boolean, lazyLoad: Boolean,
@ -29,12 +29,12 @@ VantComponent({
originPrice: String, originPrice: String,
thumbMode: { thumbMode: {
type: String, type: String,
value: 'aspectFit' value: 'aspectFit',
}, },
currency: { currency: {
type: String, type: String,
value: '¥' value: '¥',
} },
}, },
methods: { methods: {
@ -43,12 +43,12 @@ VantComponent({
const priceArr = price.toString().split('.'); const priceArr = price.toString().split('.');
this.setData({ this.setData({
integerStr: priceArr[0], integerStr: priceArr[0],
decimalStr: priceArr[1] ? `.${priceArr[1]}` : '' decimalStr: priceArr[1] ? `.${priceArr[1]}` : '',
}); });
}, },
onClickThumb() { onClickThumb() {
this.jumpLink('thumbLink'); this.jumpLink('thumbLink');
} },
} },
}); });

2
packages/cell-group/index.json
View File

@ -1,3 +1,3 @@
{ {
"component": true "component": true
} }

6
packages/cell-group/index.ts
View File

@ -5,7 +5,7 @@ VantComponent({
title: String, title: String,
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
} },
} },
}); });

74
packages/cell/README.md
View File

@ -105,58 +105,58 @@
### CellGroup Props ### CellGroup Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | ------ | -------------- | --------- | ------ | ---- |
| title | 分组标题 | *string* | `-` | - | | title | 分组标题 | _string_ | `-` | - |
| border | 是否显示外边框 | *boolean* | `true` | - | | border | 是否显示外边框 | _boolean_ | `true` | - |
### CellGroup 外部样式类 ### CellGroup 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
### Cell Props ### Cell Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - | - | | icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| title | 左侧标题 | *string \| number* | - | | title | 左侧标题 | _string \| number_ | - |
| title-width | 标题宽度，须包含单位 | *string* | - | - | | title-width | 标题宽度，须包含单位 | _string_ | - | - |
| value | 右侧内容 | *string \| number* | - | - | | value | 右侧内容 | _string \| number_ | - | - |
| label | 标题下方的描述信息 | *string* | - | - | | label | 标题下方的描述信息 | _string_ | - | - |
| size | 单元格大小，可选值为 `large` | *string* | - | - | | size | 单元格大小，可选值为 `large` | _string_ | - | - |
| border | 是否显示下边框 | *boolean* | `true` | - | | border | 是否显示下边框 | _boolean_ | `true` | - |
| center | 是否使内容垂直居中 | *boolean* | `false` | - | | center | 是否使内容垂直居中 | _boolean_ | `false` | - |
| url | 点击后跳转的链接地址 | *string* | - | - | | url | 点击后跳转的链接地址 | _string_ | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
| clickable | 是否开启点击反馈 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | - |
| required | 是否显示表单必填星号 | *boolean* | `false` | - | | required | 是否显示表单必填星号 | _boolean_ | `false` | - |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | - | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | - |
| use-label-slot | 是否使用 label slot | *boolean* | `false` | - | | use-label-slot | 是否使用 label slot | _boolean_ | `false` | - |
### Cell Event ### Cell Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | ---------- | ---------------- | ---- |
| bind:click | 点击单元格时触发 | - | | bind:click | 点击单元格时触发 | - |
### Cell Slot ### Cell Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---------- | -------------------------------------------------------------- |
| - | 自定义`value`显示内容，如果设置了`value`属性则不生效 | | - | 自定义`value`显示内容，如果设置了`value`属性则不生效 |
| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 | | title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |
| label | 自定义`label`显示内容，需要设置 `use-label-slot`属性 | | label | 自定义`label`显示内容，需要设置 `use-label-slot`属性 |
| icon | 自定义`icon`显示内容，如果设置了`icon`属性则不生效 | | icon | 自定义`icon`显示内容，如果设置了`icon`属性则不生效 |
| right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 | | right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 |
### Cell 外部样式类 ### Cell 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | -------------- |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| title-class | 标题样式类 | | title-class | 标题样式类 |
| label-class | 描述信息样式类 | | label-class | 描述信息样式类 |
| value-class | 右侧内容样式类 | | value-class | 右侧内容样式类 |

2
packages/cell/index.json
View File

@ -3,4 +3,4 @@
"usingComponents": { "usingComponents": {
"van-icon": "../icon/index" "van-icon": "../icon/index"
} }
} }

2
packages/cell/index.less
View File

@ -101,7 +101,7 @@
.van-cell__title { .van-cell__title {
.theme(font-size, '@cell-large-title-font-size'); .theme(font-size, '@cell-large-title-font-size');
} }
.van-cell__value { .van-cell__value {
.theme(font-size, '@cell-large-value-font-size'); .theme(font-size, '@cell-large-value-font-size');
} }

10
packages/cell/index.ts
View File

@ -8,7 +8,7 @@ VantComponent({
'label-class', 'label-class',
'value-class', 'value-class',
'right-icon-class', 'right-icon-class',
'hover-class' 'hover-class',
], ],
mixins: [link], mixins: [link],
@ -29,14 +29,14 @@ VantComponent({
useLabelSlot: Boolean, useLabelSlot: Boolean,
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
methods: { methods: {
onClick(event: Weapp.Event) { onClick(event: Weapp.Event) {
this.$emit('click', event.detail); this.$emit('click', event.detail);
this.jumpLink(); this.jumpLink();
} },
} },
}); });

12
packages/checkbox-group/index.ts
View File

@ -18,12 +18,12 @@ VantComponent({
max: Number, max: Number,
value: { value: {
type: Array, type: Array,
observer: 'updateChildren' observer: 'updateChildren',
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
observer: 'updateChildren' observer: 'updateChildren',
} },
}, },
methods: { methods: {
@ -37,8 +37,8 @@ VantComponent({
const { value, disabled } = this.data; const { value, disabled } = this.data;
child.setData({ child.setData({
value: value.indexOf(child.data.name) !== -1, value: value.indexOf(child.data.name) !== -1,
parentDisabled: disabled parentDisabled: disabled,
}); });
} },
} },
}); });

100
packages/checkbox/README.md
View File

@ -1,6 +1,7 @@
# Checkbox 复选框 # Checkbox 复选框
### 引入 ### 引入
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian) 在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
```json ```json
@ -23,14 +24,14 @@
```js ```js
Page({ Page({
data: { data: {
checked: true checked: true,
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
checked: event.detail checked: event.detail,
}); });
} },
}); });
``` ```
@ -48,7 +49,7 @@ Page({
将`shape`属性设置为`square`，复选框的形状会变成方形 将`shape`属性设置为`square`，复选框的形状会变成方形
```html ```html
<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange"> <van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
复选框 复选框
</van-checkbox> </van-checkbox>
@ -58,8 +59,12 @@ Page({
通过`checked-color`属性可以自定义选中状态下的图标颜色 通过`checked-color`属性可以自定义选中状态下的图标颜色
```html ```html
<van-checkbox value="{{ checked }}" checked-color="#07c160" bind:change="onChange"> <van-checkbox
value="{{ checked }}"
checked-color="#07c160"
bind:change="onChange"
>
复选框 复选框
</van-checkbox> </van-checkbox>
``` ```
@ -88,14 +93,14 @@ Page({
data: { data: {
checked: true, checked: true,
activeIcon: '//img.yzcdn.cn/icon-active.png', activeIcon: '//img.yzcdn.cn/icon-active.png',
inactiveIcon: '//img.yzcdn.cn/icon-normal.png' inactiveIcon: '//img.yzcdn.cn/icon-normal.png',
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
checked: event.detail checked: event.detail,
}); });
} },
}); });
``` ```
@ -122,14 +127,14 @@ Page({
```javascript ```javascript
Page({ Page({
data: { data: {
result: ['a', 'b'] result: ['a', 'b'],
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
result: event.detail result: event.detail,
}); });
} },
}); });
``` ```
@ -149,7 +154,7 @@ Page({
```html ```html
<van-checkbox-group value="{{ result }}" bind:change="onChange"> <van-checkbox-group value="{{ result }}" bind:change="onChange">
<van-cell-group > <van-cell-group>
<van-cell <van-cell
wx:for="{{ list }}" wx:for="{{ list }}"
wx:key="index" wx:key="index"
@ -159,7 +164,11 @@ Page({
data-index="{{ index }}" data-index="{{ index }}"
bind:click="toggle" bind:click="toggle"
> >
<van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item }}" /> <van-checkbox
catch:tap="noop"
class="checkboxes-{{ index }}"
name="{{ item }}"
/>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -188,7 +197,6 @@ Page({
}); });
``` ```
```css ```css
.value-class { .value-class {
flex: none !important; flex: none !important;
@ -200,57 +208,57 @@ Page({
### Checkbox Props ### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| name | 标识 Checkbox 名称 | *string* | - | - | | name | 标识 Checkbox 名称 | _string_ | - | - |
| shape | 形状，可选值为 `round` `square` | *string* | `round` | - | | shape | 形状，可选值为 `round` `square` | _string_ | `round` | - |
| value | 是否为选中状态 | *boolean* | `false` | - | | value | 是否为选中状态 | _boolean_ | `false` | - |
| disabled | 是否禁用单选框 | *boolean* | `false` | - | | disabled | 是否禁用单选框 | _boolean_ | `false` | - |
| label-disabled | 是否禁用单选框内容点击 | *boolean* | `false` | - | | label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` | - |
| label-position | 文本位置，可选值为 `left` | *string* | `right` | - | | label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
| use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - | | use-icon-slot | 是否使用 icon slot | _boolean_ | `false` | - |
| checked-color | 选中状态颜色 | *string* | `#1989fa` | - | | checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
| icon-size | icon 大小 | *string \| number* | `20px` | | icon-size | icon 大小 | _string \| number_ | `20px` |
### CheckboxGroup Props ### CheckboxGroup Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | -------- | ---------------------- | --------- | ------------- | ---- |
| name | 在表单内提交时的标识符 | *string* | - | - | | name | 在表单内提交时的标识符 | _string_ | - | - |
| value | 所有选中项的 name | *Array* | - | - | | value | 所有选中项的 name | _Array_ | - | - |
| disabled | 是否禁用所有单选框 | *boolean* | `false` | - | | disabled | 是否禁用所有单选框 | _boolean_ | `false` | - |
| max | 设置最大可选数 | *number* | `0`（无限制） | - | | max | 设置最大可选数 | _number_ | `0`（无限制） | - |
### Checkbox Event ### Checkbox Event
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|-----------|-----------|-----------| | ----------- | ------------------------ | ------------ |
| bind:change | 当绑定值变化时触发的事件 | 当前组件的值 | | bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
### Checkbox 外部样式类 ### Checkbox 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | -------------- |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| icon-class | 图标样式类 | | icon-class | 图标样式类 |
| label-class | 描述信息样式类 | | label-class | 描述信息样式类 |
### CheckboxGroup Event ### CheckboxGroup Event
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|-----------|-----------|-----------| | ----------- | ------------------------ | ------------ |
| bind:change | 当绑定值变化时触发的事件 | 当前组件的值 | | bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
### Checkbox Slot ### Checkbox Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---- | ---------- |
| - | 自定义文本 | | - | 自定义文本 |
| icon | 自定义图标 | | icon | 自定义图标 |
### Checkbox 方法 ### Checkbox 方法
通过 selectComponent 可以获取到 checkbox 实例并调用实例方法 通过 selectComponent 可以获取到 checkbox 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------| | ------ | ---- | ------ | ------------ |
| toggle | - | - | 切换选中状态 | | toggle | - | - | 切换选中状态 |

22
packages/checkbox/index.ts
View File

@ -1,6 +1,9 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
function emit(target: WechatMiniprogram.Component.TrivialInstance, value: boolean | any[]) { function emit(
target: WechatMiniprogram.Component.TrivialInstance,
value: boolean | any[]
) {
target.$emit('input', value); target.$emit('input', value);
target.$emit('change', value); target.$emit('change', value);
} }
@ -25,16 +28,16 @@ VantComponent({
labelDisabled: Boolean, labelDisabled: Boolean,
shape: { shape: {
type: String, type: String,
value: 'round' value: 'round',
}, },
iconSize: { iconSize: {
type: null, type: null,
value: 20 value: 20,
} },
}, },
data: { data: {
parentDisabled: false parentDisabled: false,
}, },
methods: { methods: {
@ -60,7 +63,10 @@ VantComponent({
} }
}, },
setParentValue(parent: WechatMiniprogram.Component.TrivialInstance, value: boolean) { setParentValue(
parent: WechatMiniprogram.Component.TrivialInstance,
value: boolean
) {
const parentValue = parent.data.value.slice(); const parentValue = parent.data.value.slice();
const { name } = this.data; const { name } = this.data;
const { max } = parent.data; const { max } = parent.data;
@ -81,6 +87,6 @@ VantComponent({
emit(parent, parentValue); emit(parent, parentValue);
} }
} }
} },
} },
}); });

36
packages/circle/README.md
View File

@ -55,9 +55,9 @@ Page({
value: 25, value: 25,
gradientColor: { gradientColor: {
'0%': '#ffd01e', '0%': '#ffd01e',
'100%': '#ee0a24' '100%': '#ee0a24',
} },
} },
}); });
``` ```
@ -86,21 +86,21 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------------------------------- | ------------------ | --------- | ---- | | --- | --- | --- | --- | --- |
| value | 目标进度 | *number* | `0` | - | | value | 目标进度 | _number_ | `0` | - |
| type | 指定 canvas 类型，可选值为 `2d` `webgl` | *string* | - | - | | type | 指定 canvas 类型，可选值为 `2d` `webgl` | _string_ | - | - |
| size | 圆环直径，默认单位为 `px` | *number* | `100` | - | | size | 圆环直径，默认单位为 `px` | _number_ | `100` | - |
| color | 进度条颜色，传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | - | | color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | - |
| layer-color | 轨道颜色 | *string* | `#fff` | - | | layer-color | 轨道颜色 | _string_ | `#fff` | - |
| fill | 填充颜色 | *string* | - | - | | fill | 填充颜色 | _string_ | - | - |
| speed | 动画速度（单位为 value/s） | *number* | `50` | - | | speed | 动画速度（单位为 value/s） | _number_ | `50` | - |
| text | 文字 | *string* | - | - | | text | 文字 | _string_ | - | - |
| stroke-width | 进度条宽度 | *number* | `4` | - | | stroke-width | 进度条宽度 | _number_ | `4` | - |
| clockwise | 是否顺时针增加 | *boolean* | `true` | - | | clockwise | 是否顺时针增加 | _boolean_ | `true` | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
| ------- | -------------- | | ---- | ---------------------------------------------------------- |
| - | 自定义文字内容，如果设置了`fill`，插槽内容会被原生组件覆盖 | | - | 自定义文字内容，如果设置了`fill`，插槽内容会被原生组件覆盖 |

28
packages/circle/index.ts
View File

@ -14,16 +14,16 @@ VantComponent({
text: String, text: String,
lineCap: { lineCap: {
type: String, type: String,
value: 'round' value: 'round',
}, },
value: { value: {
type: Number, type: Number,
value: 0, value: 0,
observer: 'reRender' observer: 'reRender',
}, },
speed: { speed: {
type: Number, type: Number,
value: 50 value: 50,
}, },
size: { size: {
type: Number, type: Number,
@ -32,29 +32,29 @@ VantComponent({
fill: String, fill: String,
layerColor: { layerColor: {
type: String, type: String,
value: WHITE value: WHITE,
}, },
color: { color: {
type: [String, Object], type: [String, Object],
value: BLUE, value: BLUE,
observer: 'setHoverColor' observer: 'setHoverColor',
}, },
type: { type: {
type: String, type: String,
value: '' value: '',
}, },
strokeWidth: { strokeWidth: {
type: Number, type: Number,
value: 4 value: 4,
}, },
clockwise: { clockwise: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
hoverColor: BLUE hoverColor: BLUE,
}, },
methods: { methods: {
@ -75,7 +75,9 @@ VantComponent({
const LinearColor = context.createLinearGradient(size, 0, 0, 0); const LinearColor = context.createLinearGradient(size, 0, 0, 0);
Object.keys(color) Object.keys(color)
.sort((a, b) => parseFloat(a) - parseFloat(b)) .sort((a, b) => parseFloat(a) - parseFloat(b))
.map(key => LinearColor.addColorStop(parseFloat(key) / 100, color[key])); .map((key) =>
LinearColor.addColorStop(parseFloat(key) / 100, color[key])
);
hoverColor = LinearColor; hoverColor = LinearColor;
} }
@ -159,7 +161,7 @@ VantComponent({
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
} }
} },
}, },
created() { created() {
@ -171,5 +173,5 @@ VantComponent({
destroyed() { destroyed() {
this.ctx = null; this.ctx = null;
this.clearInterval(); this.clearInterval();
} },
}); });

21
packages/col/README.md
View File

@ -19,8 +19,7 @@ Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
### 基本用法 ### 基本用法
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比。此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
```html ```html
<van-row> <van-row>
@ -55,19 +54,19 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
### Row Props ### Row Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | ------ | ----------------------------- | ------------------ | ------ | ---- |
| gutter | 列元素之间的间距（单位为px） | *string \| number* | - | - | | gutter | 列元素之间的间距（单位为 px） | _string \| number_ | - | - |
### Col Props ### Col Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | ------ | -------------- | ------------------ | ------ | ---- |
| span | 列元素宽度 | *string \| number* | - | - | | span | 列元素宽度 | _string \| number_ | - | - |
| offset | 列元素偏移距离 | *string \| number* | - | - | | offset | 列元素偏移距离 | _string \| number_ | - | - |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

8
packages/col/index.less
View File

@ -5,7 +5,11 @@
.generate(24); .generate(24);
.generate(@n, @i: 1) when (@i =< @n) { .generate(@n, @i: 1) when (@i =< @n) {
.van-col--@{i} { width: @i * 100% / 24; } .van-col--@{i} {
.van-col--offset-@{i} { margin-left: @i * 100% / 24; } width: @i * 100% / 24;
}
.van-col--offset-@{i} {
margin-left: @i * 100% / 24;
}
.generate(@n, (@i + 1)); .generate(@n, (@i + 1));
} }

12
packages/col/index.ts
View File

@ -9,21 +9,23 @@ VantComponent({
props: { props: {
span: Number, span: Number,
offset: Number offset: Number,
}, },
data: { data: {
viewStyle: '' viewStyle: '',
}, },
methods: { methods: {
setGutter(gutter: number) { setGutter(gutter: number) {
const padding = `${gutter / 2}px`; const padding = `${gutter / 2}px`;
const viewStyle = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; const viewStyle = gutter
? `padding-left: ${padding}; padding-right: ${padding};`
: '';
if (viewStyle !== this.data.viewStyle) { if (viewStyle !== this.data.viewStyle) {
this.setData({ viewStyle }); this.setData({ viewStyle });
} }
} },
} },
}); });

23
packages/collapse-item/index.ts
View File

@ -1,6 +1,6 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
const nextTick = () => new Promise(resolve => setTimeout(resolve, 20)); const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
VantComponent({ VantComponent({
classes: ['title-class', 'content-class'], classes: ['title-class', 'content-class'],
@ -21,18 +21,18 @@ VantComponent({
clickable: Boolean, clickable: Boolean,
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
isLink: { isLink: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
contentHeight: 0, contentHeight: 0,
expanded: false, expanded: false,
transition: false transition: false,
}, },
mounted() { mounted() {
@ -79,11 +79,14 @@ VantComponent({
updateStyle(expanded: boolean) { updateStyle(expanded: boolean) {
return this.getRect('.van-collapse-item__content') return this.getRect('.van-collapse-item__content')
.then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => rect.height) .then(
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) =>
rect.height
)
.then((height: number) => { .then((height: number) => {
if (expanded) { if (expanded) {
return this.set({ return this.set({
contentHeight: height ? `${height}px` : 'auto' contentHeight: height ? `${height}px` : 'auto',
}); });
} }
@ -108,9 +111,9 @@ VantComponent({
onTransitionEnd() { onTransitionEnd() {
if (this.data.expanded) { if (this.data.expanded) {
this.setData({ this.setData({
contentHeight: 'auto' contentHeight: 'auto',
}); });
} }
} },
} },
}); });

83
packages/collapse/README.md
View File

@ -1,6 +1,7 @@
# Collapse 折叠面板 # Collapse 折叠面板
### 引入 ### 引入
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian) 在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
```json ```json
@ -30,16 +31,16 @@
</van-collapse> </van-collapse>
``` ```
``` javascript ```javascript
Page({ Page({
data: { data: {
activeNames: ['1'] activeNames: ['1'],
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
activeNames: event.detail activeNames: event.detail,
}); });
} },
}); });
``` ```
@ -61,16 +62,16 @@ Page({
</van-collapse> </van-collapse>
``` ```
``` javascript ```javascript
Page({ Page({
data: { data: {
activeName: '1' activeName: '1',
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
activeName: event.detail activeName: event.detail,
}); });
} },
}); });
``` ```
@ -88,16 +89,16 @@ Page({
</van-collapse> </van-collapse>
``` ```
``` javascript ```javascript
Page({ Page({
data: { data: {
activeNames: ['1'] activeNames: ['1'],
}, },
onChange(event) { onChange(event) {
this.setData({ this.setData({
activeNames: event.detail activeNames: event.detail,
}); });
} },
}); });
``` ```
@ -106,50 +107,50 @@ Page({
### Collapse Props ### Collapse Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| | --- | --- | --- | --- | --- |
| value | 当前展开面板的 name | 非手风琴模式：*(string \| number)[]*<br>手风琴模式：*string \| number* | - | - | | value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | - | - |
| accordion | 是否开启手风琴模式 | *boolean* | `false` | - | | accordion | 是否开启手风琴模式 | _boolean_ | `false` | - |
| border | 是否显示外边框 | *boolean* | `true` | - | | border | 是否显示外边框 | _boolean_ | `true` | - |
### Collapse Event ### Collapse Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|------|------|------| | ------ | -------------- | ------------------------------ |
| change | 切换面板时触发 | activeNames: *string \| Array* | | change | 切换面板时触发 | activeNames: _string \| Array_ |
### CollapseItem Props ### CollapseItem Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|------| | --- | --- | --- | --- | --- |
| name | 唯一标识符，默认为索引值 | *string \| number* | `index` | - | | name | 唯一标识符，默认为索引值 | _string \| number_ | `index` | - |
| title | 标题栏左侧内容 | *string \| number* | - | - | | title | 标题栏左侧内容 | _string \| number_ | - | - |
| icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - | - | | icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| value | 标题栏右侧内容 | *string \| number* | - | - | | value | 标题栏右侧内容 | _string \| number_ | - | - |
| label | 标题栏描述信息 | *string* | - | - | | label | 标题栏描述信息 | _string_ | - | - |
| border | 是否显示内边框 | *boolean* | `true` | - | | border | 是否显示内边框 | _boolean_ | `true` | - |
| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | *boolean* | `true` | - | | is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` | - |
| clickable | 是否开启点击反馈 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
| disabled | 是否禁用面板 | *boolean* | `false` | - | | disabled | 是否禁用面板 | _boolean_ | `false` | - |
### CollapseItem Slot ### CollapseItem Slot
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | ----------------------------- |
| - | 面板内容 | | - | 面板内容 |
| value | 自定义显示内容 | | value | 自定义显示内容 |
| icon | 自定义`icon` | | icon | 自定义`icon` |
| title | 自定义`title` | | title | 自定义`title` |
| right-icon | 自定义右侧按钮，默认是`arrow` | | right-icon | 自定义右侧按钮，默认是`arrow` |
### Collapse 外部样式类 ### Collapse 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
### CollapseItem 外部样式类 ### CollapseItem 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------- | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| content-class | 内容样式类 | | content-class | 内容样式类 |

16
packages/collapse/index.ts
View File

@ -12,16 +12,16 @@ VantComponent({
props: { props: {
value: { value: {
type: null, type: null,
observer: 'updateExpanded' observer: 'updateExpanded',
}, },
accordion: { accordion: {
type: Boolean, type: Boolean,
observer: 'updateExpanded' observer: 'updateExpanded',
}, },
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
methods: { methods: {
@ -37,13 +37,13 @@ VantComponent({
name = expanded name = expanded
? (value || []).concat(name) ? (value || []).concat(name)
: (value || []).filter( : (value || []).filter(
(activeName: string | number) => activeName !== name (activeName: string | number) => activeName !== name
); );
} else { } else {
name = expanded ? name : ''; name = expanded ? name : '';
} }
this.$emit('change', name); this.$emit('change', name);
this.$emit('input', name); this.$emit('input', name);
} },
} },
}); });

14
packages/common/README.md
View File

@ -9,7 +9,7 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
在 app.wxss 中引入内置样式 在 app.wxss 中引入内置样式
```css ```css
@import "@vant/weapp/common/index.wxss"; @import '@vant/weapp/common/index.wxss';
``` ```
## 代码演示 ## 代码演示
@ -19,13 +19,19 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
当文本内容长度超过容器最大宽度时，自动省略多余的文本。 当文本内容长度超过容器最大宽度时，自动省略多余的文本。
```html ```html
<view class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</view> <view class="van-ellipsis"
>这是一段宽度限制 250px 的文字，后面的内容会省略</view
>
<!-- 最多显示两行 --> <!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，后面的内容会省略</view> <view class="van-multi-ellipsis--l2"
>这是一段最多显示两行的文字，后面的内容会省略</view
>
<!-- 最多显示三行 --> <!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，后面的内容会省略</view> <view class="van-multi-ellipsis--l3"
>这是一段最多显示三行的文字，后面的内容会省略</view
>
``` ```
### 1px 边框 ### 1px 边框

17
packages/common/component.ts
View File

@ -1,5 +1,8 @@
import { basic } from '../mixins/basic'; import { basic } from '../mixins/basic';
import { VantComponentOptions, CombinedComponentInstance } from 'definitions/index'; import {
VantComponentOptions,
CombinedComponentInstance,
} from 'definitions/index';
const relationFunctions = { const relationFunctions = {
ancestor: { ancestor: {
@ -16,13 +19,13 @@ const relationFunctions = {
this.children.push(child); this.children.push(child);
}, },
unlinked(child) { unlinked(child) {
this.children = (this.children || []).filter(it => it !== child); this.children = (this.children || []).filter((it) => it !== child);
}, },
}, },
}; };
function mapKeys(source: object, target: object, map: object) { function mapKeys(source: object, target: object, map: object) {
Object.keys(map).forEach(key => { Object.keys(map).forEach((key) => {
if (source[key]) { if (source[key]) {
target[map[key]] = source[key]; target[map[key]] = source[key];
} }
@ -56,7 +59,7 @@ function makeRelation(options, vantOptions, relation) {
relationFunctions[type].unlinked.bind(this)(node); relationFunctions[type].unlinked.bind(this)(node);
unlinked && unlinked.bind(this)(node); unlinked && unlinked.bind(this)(node);
}, },
} },
}); });
} }
@ -80,7 +83,7 @@ function VantComponent<Data, Props, Methods>(
mounted: 'ready', mounted: 'ready',
relations: 'relations', relations: 'relations',
destroyed: 'detached', destroyed: 'detached',
classes: 'externalClasses' classes: 'externalClasses',
}); });
const { relation } = vantOptions; const { relation } = vantOptions;
@ -102,7 +105,7 @@ function VantComponent<Data, Props, Methods>(
} }
if (options.properties) { if (options.properties) {
Object.keys(options.properties).forEach(name => { Object.keys(options.properties).forEach((name) => {
if (Array.isArray(options.properties[name])) { if (Array.isArray(options.properties[name])) {
// miniprogram do not allow multi type // miniprogram do not allow multi type
options.properties[name] = null; options.properties[name] = null;
@ -113,7 +116,7 @@ function VantComponent<Data, Props, Methods>(
// add default options // add default options
options.options = { options.options = {
multipleSlots: true, multipleSlots: true,
addGlobalClass: true addGlobalClass: true,
}; };
Component(options); Component(options);

2
packages/common/style/hairline.less
View File

@ -1,4 +1,4 @@
@import "./mixins/hairline.less"; @import './mixins/hairline.less';
.van-hairline, .van-hairline,
.van-hairline--top, .van-hairline--top,

64
packages/count-down/README.md
View File

@ -25,8 +25,8 @@
```js ```js
Page({ Page({
data: { data: {
time: 30 * 60 * 60 * 1000 time: 30 * 60 * 60 * 1000,
} },
}); });
``` ```
@ -35,10 +35,7 @@ Page({
通过`format`属性设置倒计时文本的内容 通过`format`属性设置倒计时文本的内容
```html ```html
<van-count-down <van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />
time="{{ time }}"
format="DD 天 HH 时 mm 分 ss 秒"
/>
``` ```
### 毫秒级渲染 ### 毫秒级渲染
@ -46,11 +43,7 @@ Page({
倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染 倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
```html ```html
<van-count-down <van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />
millisecond
time="{{ time }}"
format="HH:mm:ss:SSS"
/>
``` ```
### 自定义样式 ### 自定义样式
@ -58,11 +51,7 @@ Page({
设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格 设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格
```html ```html
<van-count-down <van-count-down use-slot time="{{ time }}" bind:change="onChange">
use-slot
time="{{ time }}"
bind:change="onChange"
>
<text class="item">{{ timeData.hours }}</text> <text class="item">{{ timeData.hours }}</text>
<text class="item">{{ timeData.minutes }}</text> <text class="item">{{ timeData.minutes }}</text>
<text class="item">{{ timeData.seconds }}</text> <text class="item">{{ timeData.seconds }}</text>
@ -70,18 +59,17 @@ Page({
``` ```
```js ```js
Page({ Page({
data: { data: {
time: 30 * 60 * 60 * 1000, time: 30 * 60 * 60 * 1000,
timeData: {} timeData: {},
}, },
onChange(e) { onChange(e) {
this.setData({ this.setData({
timeData: e.detail timeData: e.detail,
}); });
} },
}); });
``` ```
@ -138,7 +126,7 @@ Page({
finished() { finished() {
Toast('倒计时结束'); Toast('倒计时结束');
} },
}); });
``` ```
@ -147,36 +135,36 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| | --- | --- | --- | --- | --- |
| time | 倒计时时长，单位毫秒 | *number* | - | - | | time | 倒计时时长，单位毫秒 | _number_ | - | - |
| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | *string* | `HH:mm:ss` | - | | format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_ | `HH:mm:ss` | - |
| auto-start | 是否自动开始倒计时 | *boolean* | `true` | - | | auto-start | 是否自动开始倒计时 | _boolean_ | `true` | - |
| millisecond | 是否开启毫秒级渲染 | *boolean* | `false` | - | | millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | - |
| use-slot | 是否使用自定义样式插槽 | *boolean* | `false` | - | | use-slot | 是否使用自定义样式插槽 | _boolean_ | `false` | - |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------------------------------------- | -------- |
| finish | 倒计时结束时触发 | - | | finish | 倒计时结束时触发 | - |
| change | 时间变化时触发，仅在开启`use-slot`后才会触发 | timeData | | change | 时间变化时触发，仅在开启`use-slot`后才会触发 | timeData |
### timeData 格式 ### timeData 格式
| 名称 | 说明 | 类型 | | 名称 | 说明 | 类型 |
|------|------|------| | ------------ | -------- | -------- |
| days | 剩余天数 | *number* | | days | 剩余天数 | _number_ |
| hours | 剩余小时 | *number* | | hours | 剩余小时 | _number_ |
| minutes | 剩余分钟 | *number* | | minutes | 剩余分钟 | _number_ |
| seconds | 剩余秒数 | *number* | | seconds | 剩余秒数 | _number_ |
| milliseconds | 剩余毫秒 | *number* | | milliseconds | 剩余毫秒 | _number_ |
### 方法 ### 方法
通过 selectComponent 可以获取到 CountDown 实例并调用实例方法 通过 selectComponent 可以获取到 CountDown 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |
|------|------|------|------| | --- | --- | --- | --- |
| start | - | - | 开始倒计时 | | start | - | - | 开始倒计时 |
| pause | - | - | 暂停倒计时 | | pause | - | - | 暂停倒计时 |
| reset | - | - | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | | reset | - | - | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 |

16
packages/count-down/index.ts
View File

@ -11,21 +11,21 @@ VantComponent({
millisecond: Boolean, millisecond: Boolean,
time: { time: {
type: Number, type: Number,
observer: 'reset' observer: 'reset',
}, },
format: { format: {
type: String, type: String,
value: 'HH:mm:ss' value: 'HH:mm:ss',
}, },
autoStart: { autoStart: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
timeData: parseTimeData(0), timeData: parseTimeData(0),
formattedTime: '0' formattedTime: '0',
}, },
destroyed() { destroyed() {
@ -107,13 +107,13 @@ VantComponent({
} }
this.setData({ this.setData({
formattedTime: parseFormat(this.data.format, timeData) formattedTime: parseFormat(this.data.format, timeData),
}); });
if (remain === 0) { if (remain === 0) {
this.pause(); this.pause();
this.$emit('finish'); this.$emit('finish');
} }
} },
} },
}); });

2
packages/count-down/utils.ts
View File

@ -33,7 +33,7 @@ export function parseTimeData(time: number): TimeData {
hours, hours,
minutes, minutes,
seconds, seconds,
milliseconds milliseconds,
}; };
} }

102
packages/datetime-picker/README.md
View File

@ -37,14 +37,14 @@ Page({
maxHour: 20, maxHour: 20,
minDate: new Date().getTime(), minDate: new Date().getTime(),
maxDate: new Date(2019, 10, 1).getTime(), maxDate: new Date(2019, 10, 1).getTime(),
currentDate: new Date().getTime() currentDate: new Date().getTime(),
}, },
onInput(event) { onInput(event) {
this.setData({ this.setData({
currentDate: event.detail currentDate: event.detail,
}); });
} },
}); });
``` ```
@ -74,14 +74,14 @@ Page({
return `${value}月`; return `${value}月`;
} }
return value; return value;
} },
}, },
onInput(event) { onInput(event) {
this.setData({ this.setData({
currentDate: event.detail currentDate: event.detail,
}); });
} },
}); });
``` ```
@ -102,14 +102,14 @@ Page({
Page({ Page({
data: { data: {
currentDate: new Date().getTime(), currentDate: new Date().getTime(),
minDate: new Date().getTime() minDate: new Date().getTime(),
}, },
onInput(event) { onInput(event) {
this.setData({ this.setData({
currentDate: event.detail currentDate: event.detail,
}); });
} },
}); });
``` ```
@ -132,14 +132,14 @@ Page({
data: { data: {
currentDate: '12:00', currentDate: '12:00',
minHour: 10, minHour: 10,
maxHour: 20 maxHour: 20,
}, },
onInput(event) { onInput(event) {
this.setData({ this.setData({
currentDate: event.detail currentDate: event.detail,
}); });
} },
}); });
``` ```
@ -161,12 +161,12 @@ Page({
currentDate: '12:00', currentDate: '12:00',
filter(type, options) { filter(type, options) {
if (type === 'minute') { if (type === 'minute') {
return options.filter(option => option % 5 === 0) return options.filter((option) => option % 5 === 0);
} }
return options; return options;
} },
} },
}); });
``` ```
@ -175,51 +175,51 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|------| | --- | --- | --- | --- | --- |
| value | 当前选中值 | *string \| number* | - | - | | value | 当前选中值 | _string \| number_ | - | - |
| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | *string* | `datetime` | - | | type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | _string_ | `datetime` | - |
| min-date | 可选的最小时间，精确到分钟 | *number* | 十年前 | - | | min-date | 可选的最小时间，精确到分钟 | _number_ | 十年前 | - |
| max-date | 可选的最大时间，精确到分钟 | *number* | 十年后 | - | | max-date | 可选的最大时间，精确到分钟 | _number_ | 十年后 | - |
| min-hour | 可选的最小小时，针对 time 类型 | *number* | `0` | - | | min-hour | 可选的最小小时，针对 time 类型 | _number_ | `0` | - |
| max-hour | 可选的最大小时，针对 time 类型 | *number* | `23` | - | | max-hour | 可选的最大小时，针对 time 类型 | _number_ | `23` | - |
| min-minute | 可选的最小分钟，针对 time 类型 | *number* | `0` | - | | min-minute | 可选的最小分钟，针对 time 类型 | _number_ | `0` | - |
| max-minute | 可选的最大分钟，针对 time 类型 | *number* | `59` | - | | max-minute | 可选的最大分钟，针对 time 类型 | _number_ | `59` | - |
| filter | 选项过滤函数 | *(type, values) => values* | - | - | | filter | 选项过滤函数 | _(type, values) => values_ | - | - |
| formatter | 选项格式化函数 | *(type, value) => value* | - | - | | formatter | 选项格式化函数 | _(type, value) => value_ | - | - |
| title | 顶部栏标题 | *string* | `''` | - | | title | 顶部栏标题 | _string_ | `''` | - |
| show-toolbar | 是否显示顶部栏 | *boolean* | `true` | - | | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | - |
| loading | 是否显示加载状态 | *boolean* | `false` | - | | loading | 是否显示加载状态 | _boolean_ | `false` | - |
| item-height | 选项高度 | *number* | `44` | - | | item-height | 选项高度 | _number_ | `44` | - |
| confirm-button-text | 确认按钮文字 | *string* | `确认` | - | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | - |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | - | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | - |
| visible-item-count | 可见的选项个数 | *number* | `5` | - | | visible-item-count | 可见的选项个数 | _number_ | `5` | - |
### Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|------|------|------| | -------- | ------------------------ | ---------- |
| input | 当值变化时触发的事件 | 当前 value | | input | 当值变化时触发的事件 | 当前 value |
| change | 当值变化时触发的事件 | 组件实例 | | change | 当值变化时触发的事件 | 组件实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value | | confirm | 点击完成按钮时触发的事件 | 当前 value |
| cancel | 点击取消按钮时触发的事件 | - | | cancel | 点击取消按钮时触发的事件 | - |
### change 事件 ### change 事件
在`change`事件中，可以获取到组件实例，对组件进行相应的更新等操作： 在`change`事件中，可以获取到组件实例，对组件进行相应的更新等操作：
| 函数 | 说明 | | 函数 | 说明 |
|------|------| | ------------------------------ | ------------------------------------------ |
| getColumnValue(index) | 获取对应列中选中的值 | | getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 | | setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 | | getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 | | setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 | | getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 | | setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------- | ------------ |
| active-class | 选中项样式类 | | active-class | 选中项样式类 |
| toolbar-class | 顶部栏样式类 | | toolbar-class | 顶部栏样式类 |
| column-class | 列样式类 | | column-class | 列样式类 |

68
packages/datetime-picker/index.ts
View File

@ -47,57 +47,57 @@ VantComponent({
...pickerProps, ...pickerProps,
value: { value: {
type: null, type: null,
observer: 'updateValue' observer: 'updateValue',
}, },
filter: null, filter: null,
type: { type: {
type: String, type: String,
value: 'datetime', value: 'datetime',
observer: 'updateValue' observer: 'updateValue',
}, },
showToolbar: { showToolbar: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
formatter: { formatter: {
type: null, type: null,
value: defaultFormatter value: defaultFormatter,
}, },
minDate: { minDate: {
type: Number, type: Number,
value: new Date(currentYear - 10, 0, 1).getTime(), value: new Date(currentYear - 10, 0, 1).getTime(),
observer: 'updateValue' observer: 'updateValue',
}, },
maxDate: { maxDate: {
type: Number, type: Number,
value: new Date(currentYear + 10, 11, 31).getTime(), value: new Date(currentYear + 10, 11, 31).getTime(),
observer: 'updateValue' observer: 'updateValue',
}, },
minHour: { minHour: {
type: Number, type: Number,
value: 0, value: 0,
observer: 'updateValue' observer: 'updateValue',
}, },
maxHour: { maxHour: {
type: Number, type: Number,
value: 23, value: 23,
observer: 'updateValue' observer: 'updateValue',
}, },
minMinute: { minMinute: {
type: Number, type: Number,
value: 0, value: 0,
observer: 'updateValue' observer: 'updateValue',
}, },
maxMinute: { maxMinute: {
type: Number, type: Number,
value: 59, value: 59,
observer: 'updateValue' observer: 'updateValue',
} },
}, },
data: { data: {
innerValue: Date.now(), innerValue: Date.now(),
columns: [] columns: [],
}, },
methods: { methods: {
@ -129,8 +129,8 @@ VantComponent({
updateColumns() { updateColumns() {
const { formatter = defaultFormatter } = this.data; const { formatter = defaultFormatter } = this.data;
const results = this.getOriginColumns().map(column => ({ const results = this.getOriginColumns().map((column) => ({
values: column.values.map(value => formatter(column.type, value)) values: column.values.map((value) => formatter(column.type, value)),
})); }));
return this.set({ columns: results }); return this.set({ columns: results });
@ -139,7 +139,7 @@ VantComponent({
getOriginColumns() { getOriginColumns() {
const { filter } = this.data; const { filter } = this.data;
const results = this.getRanges().map(({ type, range }) => { const results = this.getRanges().map(({ type, range }) => {
let values = times(range[1] - range[0] + 1, index => { let values = times(range[1] - range[0] + 1, (index) => {
let value = range[0] + index; let value = range[0] + index;
value = type === 'year' ? `${value}` : padZero(value); value = type === 'year' ? `${value}` : padZero(value);
return value; return value;
@ -161,12 +161,12 @@ VantComponent({
return [ return [
{ {
type: 'hour', type: 'hour',
range: [data.minHour, data.maxHour] range: [data.minHour, data.maxHour],
}, },
{ {
type: 'minute', type: 'minute',
range: [data.minMinute, data.maxMinute] range: [data.minMinute, data.maxMinute],
} },
]; ];
} }
@ -175,37 +175,37 @@ VantComponent({
maxDate, maxDate,
maxMonth, maxMonth,
maxHour, maxHour,
maxMinute maxMinute,
} = this.getBoundary('max', data.innerValue); } = this.getBoundary('max', data.innerValue);
const { const {
minYear, minYear,
minDate, minDate,
minMonth, minMonth,
minHour, minHour,
minMinute minMinute,
} = this.getBoundary('min', data.innerValue); } = this.getBoundary('min', data.innerValue);
const result = [ const result = [
{ {
type: 'year', type: 'year',
range: [minYear, maxYear] range: [minYear, maxYear],
}, },
{ {
type: 'month', type: 'month',
range: [minMonth, maxMonth] range: [minMonth, maxMonth],
}, },
{ {
type: 'day', type: 'day',
range: [minDate, maxDate] range: [minDate, maxDate],
}, },
{ {
type: 'hour', type: 'hour',
range: [minHour, maxHour] range: [minHour, maxHour],
}, },
{ {
type: 'minute', type: 'minute',
range: [minMinute, maxMinute] range: [minMinute, maxMinute],
} },
]; ];
if (data.type === 'date') result.splice(3, 2); if (data.type === 'date') result.splice(3, 2);
@ -274,7 +274,7 @@ VantComponent({
[`${type}Month`]: month, [`${type}Month`]: month,
[`${type}Date`]: date, [`${type}Date`]: date,
[`${type}Hour`]: hour, [`${type}Hour`]: hour,
[`${type}Minute`]: minute [`${type}Minute`]: minute,
}; };
}, },
@ -294,7 +294,8 @@ VantComponent({
if (data.type === 'time') { if (data.type === 'time') {
const indexes = picker.getIndexes(); const indexes = picker.getIndexes();
value = `${+data.columns[0].values[indexes[0]]}:${+data.columns[1].values[indexes[1]]}`; value = `${+data.columns[0].values[indexes[0]]}:${+data.columns[1]
.values[indexes[1]]}`;
} else { } else {
const values = picker.getValues(); const values = picker.getValues();
const year = getTrueValue(values[0]); const year = getTrueValue(values[0]);
@ -328,15 +329,12 @@ VantComponent({
if (type === 'time') { if (type === 'time') {
const pair = value.split(':'); const pair = value.split(':');
values = [ values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
formatter('hour', pair[0]),
formatter('minute', pair[1])
];
} else { } else {
const date = new Date(value); const date = new Date(value);
values = [ values = [
formatter('year', `${date.getFullYear()}`), formatter('year', `${date.getFullYear()}`),
formatter('month', padZero(date.getMonth() + 1)) formatter('month', padZero(date.getMonth() + 1)),
]; ];
if (type === 'date') { if (type === 'date') {
values.push(formatter('day', padZero(date.getDate()))); values.push(formatter('day', padZero(date.getDate())));
@ -353,7 +351,7 @@ VantComponent({
return this.set({ innerValue: value }) return this.set({ innerValue: value })
.then(() => this.updateColumns()) .then(() => this.updateColumns())
.then(() => picker.setValues(values)); .then(() => picker.setValues(values));
} },
}, },
created() { created() {
@ -361,5 +359,5 @@ VantComponent({
this.updateColumnValue(innerValue).then(() => { this.updateColumnValue(innerValue).then(() => {
this.$emit('input', innerValue); this.$emit('input', innerValue);
}); });
} },
}); });

9
packages/definitions/index.ts
View File

@ -2,14 +2,9 @@ import { Weapp } from './weapp';
type RecordToAny<T> = { [K in keyof T]: any }; type RecordToAny<T> = { [K in keyof T]: any };
export type CombinedComponentInstance< export type CombinedComponentInstance<Data, Props, Methods> = Methods &
Data,
Props,
Methods
> = Methods &
WechatMiniprogram.Component.TrivialInstance & WechatMiniprogram.Component.TrivialInstance &
Weapp.FormField & Weapp.FormField & {
{
data: Data & RecordToAny<Props>; data: Data & RecordToAny<Props>;
}; };

152
packages/dialog/README.md
View File

@ -31,13 +31,13 @@ import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
Dialog.alert({ Dialog.alert({
title: '标题', title: '标题',
message: '弹窗内容' message: '弹窗内容',
}).then(() => { }).then(() => {
// on close // on close
}); });
Dialog.alert({ Dialog.alert({
message: '弹窗内容' message: '弹窗内容',
}).then(() => { }).then(() => {
// on close // on close
}); });
@ -50,12 +50,14 @@ Dialog.alert({
```javascript ```javascript
Dialog.confirm({ Dialog.confirm({
title: '标题', title: '标题',
message: '弹窗内容' message: '弹窗内容',
}).then(() => { })
// on confirm .then(() => {
}).catch(() => { // on confirm
// on cancel })
}); .catch(() => {
// on cancel
});
``` ```
### 异步关闭 ### 异步关闭
@ -99,7 +101,7 @@ Dialog.confirm({
```js ```js
Page({ Page({
data: { data: {
show: true show: true,
}, },
getUserInfo(event) { getUserInfo(event) {
@ -108,7 +110,7 @@ Page({
onClose() { onClose() {
this.setData({ close: false }); this.setData({ close: false });
} },
}); });
``` ```
@ -117,7 +119,7 @@ Page({
### 方法 ### 方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------| | --- | --- | --- | --- |
| Dialog | `options` | `Promise` | 展示弹窗 | | Dialog | `options` | `Promise` | 展示弹窗 |
| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 | | Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 | | Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 |
@ -131,90 +133,90 @@ Page({
通过函数调用 Dialog 时，支持传入以下选项： 通过函数调用 Dialog 时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| title | 标题 | *string* | - | - | | title | 标题 | _string_ | - | - |
| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 | | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | *string* | - | 1.0.0 | | message | 文本内容，支持通过`\n`换行 | _string_ | - | 1.0.0 |
| messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - | | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | - |
| zIndex | z-index 层级 | *number* | `100` | - | | zIndex | z-index 层级 | _number_ | `100` | - |
| className | 自定义类名，dialog在自定义组件内时无效 | *string* | '' | - | | className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | - |
| customStyle | 自定义样式 | *string* | '' | - | | customStyle | 自定义样式 | _string_ | '' | - |
| selector | 自定义选择器 | *string* | `van-dialog` | - | | selector | 自定义选择器 | _string_ | `van-dialog` | - |
| showConfirmButton | 是否展示确认按钮 | *boolean* | `true` | - | | showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | - |
| showCancelButton | 是否展示取消按钮 | *boolean* | `false` | - | | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | - |
| confirmButtonText | 确认按钮的文案 | *string* | `确认` | - | | confirmButtonText | 确认按钮的文案 | _string_ | `确认` | - |
| cancelButtonText | 取消按钮的文案 | *string* | `取消` | - | | cancelButtonText | 取消按钮的文案 | _string_ | `取消` | - |
| overlay | 是否展示遮罩层 | *boolean* | `true` | - | | overlay | 是否展示遮罩层 | _boolean_ | `true` | - |
| overlayStyle | 自定义遮罩层样式 | *object* | - | 1.0.0 | | overlayStyle | 自定义遮罩层样式 | _object_ | - | 1.0.0 |
| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - | | closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | - |
| asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` | - | | asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | _boolean_ | `false` | - |
| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 | - | | context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | - |
| transition | 动画名称，可选值为`fade` `none` | *string* | `scale` | - | | transition | 动画名称，可选值为`fade` `none` | _string_ | `scale` | - |
| confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - | | confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
### OpenType Options ### OpenType Options
使用`confirmButtonOpenType`后，支持以下选项： 使用`confirmButtonOpenType`后，支持以下选项：
| 参数 | 说明 | 类型 | 默认值 | open-type | | 参数 | 说明 | 类型 | 默认值 | open-type |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| appParameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | `launchApp` | | appParameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | `getUserInfo` | | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
| sessionFrom | 会话来源 | *string* | - | `contact` | | sessionFrom | 会话来源 | _string_ | - | `contact` |
| businessId | 客服消息子商户 id | *number* | - | `contact` | | businessId | 客服消息子商户 id | _number_ | - | `contact` |
| sendMessageTitle | 会话内消息卡片标题 | *string* | 当前标题 | `contact` | | sendMessageTitle | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | `contact` | | sendMessagePath | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` |
| sendMessageImg | sendMessageImg | *string* | 截图 | `contact` | | sendMessageImg | sendMessageImg | _string_ | 截图 | `contact` |
| showMessageCard | 显示会话内消息卡片 | *string* | `false` | `contact` | | showMessageCard | 显示会话内消息卡片 | _string_ | `false` | `contact` |
### Props ### Props
通过组件调用 Dialog 时，支持以下 Props: 通过组件调用 Dialog 时，支持以下 Props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| | --- | --- | --- | --- |
| show | 是否显示弹窗 | *boolean* | - | | show | 是否显示弹窗 | _boolean_ | - |
| title | 标题 | *string* | - | | title | 标题 | _string_ | - |
| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 | | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | *string* | - | | message | 文本内容，支持通过`\n`换行 | _string_ | - |
| message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` | | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| z-index | z-index 层级 | *number* | `100` | | z-index | z-index 层级 | _number_ | `100` |
| class-name | 自定义类名，dialog在自定义组件内时无效 | *string* | '' | | class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' |
| custom-style | 自定义样式 | *string* | '' | | custom-style | 自定义样式 | _string_ | '' |
| show-confirm-button | 是否展示确认按钮 | *boolean* | `true` | | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
| show-cancel-button | 是否展示取消按钮 | *boolean* | `false` | | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
| confirm-button-text | 确认按钮的文案 | *string* | `确认` | | confirm-button-text | 确认按钮的文案 | _string_ | `确认` |
| cancel-button-text | 取消按钮的文案 | *string* | `取消` | | cancel-button-text | 取消按钮的文案 | _string_ | `取消` |
| confirm-button-color | 确认按钮的字体颜色 | *string* | `#1989fa` | | confirm-button-color | 确认按钮的字体颜色 | _string_ | `#1989fa` |
| cancel-button-color | 取消按钮的字体颜色 | *string* | `#333` | | cancel-button-color | 取消按钮的字体颜色 | _string_ | `#333` |
| overlay | 是否展示遮罩层 | *boolean* | `true` | | overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlay-style | 自定义遮罩层样式 | *object* | - | 1.0.0 | | overlay-style | 自定义遮罩层样式 | _object_ | - | 1.0.0 |
| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | | close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` |
| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` | | use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` |
| use-title-slot | 是否使用自定义标题的插槽 | *boolean* | `false` | | use-title-slot | 是否使用自定义标题的插槽 | _boolean_ | `false` |
| async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` | | async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | _boolean_ | `false` |
| transition | 动画名称，可选值为`fade` | *string* | `scale` | | transition | 动画名称，可选值为`fade` | _string_ | `scale` |
| confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | | confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - |
### OpenType Props ### OpenType Props
使用`confirm-button-open-type`后，支持以下 Props： 使用`confirm-button-open-type`后，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 | open-type | | 参数 | 说明 | 类型 | 默认值 | open-type |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | `launchApp` | | app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | `getUserInfo` | | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
| session-from | 会话来源 | *string* | - | `contact` | | session-from | 会话来源 | _string_ | - | `contact` |
| business-id | 客服消息子商户 id | *number* | - | `contact` | | business-id | 客服消息子商户 id | _number_ | - | `contact` |
| send-message-title | 会话内消息卡片标题 | *string* | 当前标题 | `contact` | | send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | `contact` | | send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` |
| send-message-img | sendMessageImg | *string* | 截图 | `contact` | | send-message-img | sendMessageImg | _string_ | 截图 | `contact` |
| show-message-card | 显示会话内消息卡片 | *string* | `false` | `contact` | | show-message-card | 显示会话内消息卡片 | _string_ | `false` | `contact` |
### Events ### Events
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
|-----------|-----------|-----------| | --- | --- | --- |
| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` | | bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
| bind:confirm | 点击确认按钮时触发 | - | | bind:confirm | 点击确认按钮时触发 | - |
| bind:cancel | 点击取消按钮时触发 | - | | bind:cancel | 点击取消按钮时触发 | - |
@ -226,6 +228,6 @@ Page({
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ----- | ---------------------------------------------------- |
| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 | | title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |

28
packages/dialog/dialog.ts
View File

@ -7,7 +7,9 @@ type DialogOptions = {
title?: string; title?: string;
width?: string | number; width?: string | number;
zIndex?: number; zIndex?: number;
context?: WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance; context?:
| WechatMiniprogram.Page.TrivialInstance
| WechatMiniprogram.Component.TrivialInstance;
message?: string; message?: string;
overlay?: boolean; overlay?: boolean;
selector?: string; selector?: string;
@ -31,7 +33,7 @@ type DialogOptions = {
showCancelButton?: boolean; showCancelButton?: boolean;
closeOnClickOverlay?: boolean; closeOnClickOverlay?: boolean;
confirmButtonOpenType?: string; confirmButtonOpenType?: string;
} };
interface Dialog { interface Dialog {
(options: DialogOptions): Promise<DialogAction>; (options: DialogOptions): Promise<DialogAction>;
@ -51,10 +53,10 @@ function getContext() {
return pages[pages.length - 1]; return pages[pages.length - 1];
} }
const Dialog: Dialog = options => { const Dialog: Dialog = (options) => {
options = { options = {
...Dialog.currentOptions, ...Dialog.currentOptions,
...options ...options,
}; };
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -68,11 +70,13 @@ const Dialog: Dialog = options => {
dialog.setData({ dialog.setData({
onCancel: reject, onCancel: reject,
onConfirm: resolve, onConfirm: resolve,
...options ...options,
}); });
queue.push(dialog); queue.push(dialog);
} else { } else {
console.warn('未找到 van-dialog 节点，请确认 selector 及 context 是否正确'); console.warn(
'未找到 van-dialog 节点，请确认 selector 及 context 是否正确'
);
} }
}); });
}; };
@ -96,31 +100,31 @@ Dialog.defaultOptions = {
showConfirmButton: true, showConfirmButton: true,
showCancelButton: false, showCancelButton: false,
closeOnClickOverlay: false, closeOnClickOverlay: false,
confirmButtonOpenType: '' confirmButtonOpenType: '',
}; };
Dialog.alert = Dialog; Dialog.alert = Dialog;
Dialog.confirm = options => Dialog.confirm = (options) =>
Dialog({ Dialog({
showCancelButton: true, showCancelButton: true,
...options ...options,
}); });
Dialog.close = () => { Dialog.close = () => {
queue.forEach(dialog => { queue.forEach((dialog) => {
dialog.close(); dialog.close();
}); });
queue = []; queue = [];
}; };
Dialog.stopLoading = () => { Dialog.stopLoading = () => {
queue.forEach(dialog => { queue.forEach((dialog) => {
dialog.stopLoading(); dialog.stopLoading();
}); });
}; };
Dialog.setDefaultOptions = options => { Dialog.setDefaultOptions = (options) => {
Object.assign(Dialog.currentOptions, options); Object.assign(Dialog.currentOptions, options);
}; };

40
packages/dialog/index.ts
View File

@ -13,7 +13,7 @@ VantComponent({
type: Boolean, type: Boolean,
observer(show: boolean) { observer(show: boolean) {
!show && this.stopLoading(); !show && this.stopLoading();
} },
}, },
title: String, title: String,
message: String, message: String,
@ -30,43 +30,43 @@ VantComponent({
width: null, width: null,
zIndex: { zIndex: {
type: Number, type: Number,
value: 2000 value: 2000,
}, },
confirmButtonText: { confirmButtonText: {
type: String, type: String,
value: '确认' value: '确认',
}, },
cancelButtonText: { cancelButtonText: {
type: String, type: String,
value: '取消' value: '取消',
}, },
confirmButtonColor: { confirmButtonColor: {
type: String, type: String,
value: BLUE value: BLUE,
}, },
cancelButtonColor: { cancelButtonColor: {
type: String, type: String,
value: GRAY value: GRAY,
}, },
showConfirmButton: { showConfirmButton: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
transition: { transition: {
type: String, type: String,
value: 'scale' value: 'scale',
} },
}, },
data: { data: {
loading: { loading: {
confirm: false, confirm: false,
cancel: false cancel: false,
} },
}, },
methods: { methods: {
@ -85,7 +85,7 @@ VantComponent({
handleAction(action: Action) { handleAction(action: Action) {
if (this.data.asyncClose) { if (this.data.asyncClose) {
this.setData({ this.setData({
[`loading.${action}`]: true [`loading.${action}`]: true,
}); });
} }
@ -94,7 +94,7 @@ VantComponent({
close() { close() {
this.setData({ this.setData({
show: false show: false,
}); });
}, },
@ -102,8 +102,8 @@ VantComponent({
this.setData({ this.setData({
loading: { loading: {
confirm: false, confirm: false,
cancel: false cancel: false,
} },
}); });
}, },
@ -116,10 +116,12 @@ VantComponent({
// 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
this.$emit(action, { dialog: this }); this.$emit(action, { dialog: this });
const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel']; const callback = this.data[
action === 'confirm' ? 'onConfirm' : 'onCancel'
];
if (callback) { if (callback) {
callback(this); callback(this);
} }
} },
} },
}); });

30
packages/divider/README.md
View File

@ -24,7 +24,7 @@
<van-divider /> <van-divider />
``` ```
### 使用hairline ### 使用 hairline
```html ```html
<van-divider hairline /> <van-divider hairline />
@ -40,22 +40,28 @@
```html ```html
<van-divider contentPosition="center">文本</van-divider> <van-divider contentPosition="center">文本</van-divider>
<van-divider contentPosition="left">文本</van-divider> <van-divider contentPosition="left">文本</van-divider>
<van-divider contentPosition="right">文本</van-divider> <van-divider contentPosition="right">文本</van-divider>
``` ```
### 自定义属性 ### 自定义属性
```html ```html
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider> <van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
<van-divider contentPosition="center" borderColor="#1989fa">border颜色</van-divider> <van-divider contentPosition="center" borderColor="#1989fa"
>border颜色</van-divider
>
<van-divider contentPosition="center" fontSize="18">字体大小</van-divider> <van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
``` ```
### 自定义样式 ### 自定义样式
```html ```html
<van-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider> <van-divider
contentPosition="center"
customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
>文本</van-divider
>
``` ```
## API ## API
@ -63,14 +69,14 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| dashed | 虚线 | *boolean* | false | - | | dashed | 虚线 | _boolean_ | false | - |
| hairline | 细线 | *boolean* | false | - | | hairline | 细线 | _boolean_ | false | - |
| content-position | 文本位置，`left` `center` `right` | *string* | - | - | | content-position | 文本位置，`left` `center` `right` | _string_ | - | - |
| custom-style | 自定义样式 | *string* | - | - | | custom-style | 自定义样式 | _string_ | - | - |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---- | -------------- |
| 默认 | 自定义文本内容 | | 默认 | 自定义文本内容 |

2
packages/divider/index.json
View File

@ -1,4 +1,4 @@
{ {
"component": true, "component": true,
"usingComponents": {} "usingComponents": {}
} }

2
packages/divider/index.less
View File

@ -31,7 +31,7 @@
&--hairline { &--hairline {
&::before, &::before,
&::after { &::after {
transform: scaleY(.5); transform: scaleY(0.5);
} }
} }

18
packages/divider/index.ts
View File

@ -4,31 +4,31 @@ VantComponent({
props: { props: {
dashed: { dashed: {
type: Boolean, type: Boolean,
value: false value: false,
}, },
hairline: { hairline: {
type: Boolean, type: Boolean,
value: false value: false,
}, },
contentPosition: { contentPosition: {
type: String, type: String,
value: '' value: '',
}, },
fontSize: { fontSize: {
type: Number, type: Number,
value: '' value: '',
}, },
borderColor: { borderColor: {
type: String, type: String,
value: '' value: '',
}, },
textColor: { textColor: {
type: String, type: String,
value: '' value: '',
}, },
customStyle: { customStyle: {
type: String, type: String,
value: '' value: '',
} },
} },
}); });

22
packages/dropdown-item/index.ts
View File

@ -10,36 +10,36 @@ VantComponent({
current: 'dropdown-item', current: 'dropdown-item',
linked() { linked() {
this.updateDataFromParent(); this.updateDataFromParent();
} },
}, },
props: { props: {
value: { value: {
type: null, type: null,
observer: 'rerender' observer: 'rerender',
}, },
title: { title: {
type: String, type: String,
observer: 'rerender' observer: 'rerender',
}, },
disabled: Boolean, disabled: Boolean,
titleClass: { titleClass: {
type: String, type: String,
observer: 'rerender' observer: 'rerender',
}, },
options: { options: {
type: Array, type: Array,
value: [], value: [],
observer: 'rerender' observer: 'rerender',
}, },
popupStyle: String popupStyle: String,
}, },
data: { data: {
transition: true, transition: true,
showPopup: false, showPopup: false,
showWrapper: false, showWrapper: false,
displayTitle: '' displayTitle: '',
}, },
methods: { methods: {
@ -56,14 +56,14 @@ VantComponent({
duration, duration,
activeColor, activeColor,
closeOnClickOverlay, closeOnClickOverlay,
direction direction,
} = this.parent.data; } = this.parent.data;
this.setData({ this.setData({
overlay, overlay,
duration, duration,
activeColor, activeColor,
closeOnClickOverlay, closeOnClickOverlay,
direction direction,
}); });
} }
}, },
@ -124,6 +124,6 @@ VantComponent({
} else { } else {
this.rerender(); this.rerender();
} }
} },
} },
}); });

38
packages/dropdown-menu/README.md
View File

@ -28,16 +28,16 @@ Page({
option1: [ option1: [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 } { text: '活动商品', value: 2 },
], ],
option2: [ option2: [
{ text: '默认排序', value: 'a' }, { text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' }, { text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' } { text: '销量排序', value: 'c' },
], ],
value1: 0, value1: 0,
value2: 'a' value2: 'a',
} },
}); });
``` ```
@ -81,9 +81,9 @@ Page({
option1: [ option1: [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 } { text: '活动商品', value: 2 },
], ],
value1: 0 value1: 0,
}, },
onConfirm() { onConfirm() {
@ -96,7 +96,7 @@ Page({
onSwitch2Change({ detail }) { onSwitch2Change({ detail }) {
this.setData({ switch2: detail }); this.setData({ switch2: detail });
} },
}); });
``` ```
@ -131,15 +131,15 @@ Page({
### DropdownMenu Props ### DropdownMenu Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ------------------------------ | --------- | --------- | | --- | --- | --- | --- |
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` | | active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` |
| z-index | 菜单栏 z-index 层级 | _number_ | `10` | | z-index | 菜单栏 z-index 层级 | _number_ | `10` |
| duration | 动画时长，单位毫秒 | _number_ | `200` | | duration | 动画时长，单位毫秒 | _number_ | `200` |
| direction | 菜单展开方向，可选值为 up | _string_ | `down` | | direction | 菜单展开方向，可选值为 up | _string_ | `down` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |
| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true` | | close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true` |
### DropdownItem Props ### DropdownItem Props
@ -166,9 +166,9 @@ Page({
通过 selectComponent(id) 可访问 通过 selectComponent(id) 可访问
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
| ------ | ------------------------------------------------------------- | -------------- | ------ | | --- | --- | --- | --- |
| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - | | toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
### Option 数据结构 ### Option 数据结构

2
packages/dropdown-menu/index.json
View File

@ -1,3 +1,3 @@
{ {
"component": true "component": true
} }

4
packages/dropdown-menu/index.less
View File

@ -15,7 +15,7 @@
min-width: 0; // hack for flex ellipsis min-width: 0; // hack for flex ellipsis
&:active { &:active {
opacity: .7; opacity: 0.7;
} }
&--disabled { &--disabled {
@ -46,7 +46,7 @@
border: 3px solid; border: 3px solid;
border-color: transparent transparent currentColor currentColor; border-color: transparent transparent currentColor currentColor;
transform: rotate(-45deg); transform: rotate(-45deg);
opacity: .8; opacity: 0.8;
content: ''; content: '';
} }

33
packages/dropdown-menu/index.ts
View File

@ -17,46 +17,46 @@ VantComponent({
}, },
unlinked() { unlinked() {
this.updateItemListData(); this.updateItemListData();
} },
}, },
props: { props: {
activeColor: { activeColor: {
type: String, type: String,
observer: 'updateChildrenData' observer: 'updateChildrenData',
}, },
overlay: { overlay: {
type: Boolean, type: Boolean,
value: true, value: true,
observer: 'updateChildrenData' observer: 'updateChildrenData',
}, },
zIndex: { zIndex: {
type: Number, type: Number,
value: 10 value: 10,
}, },
duration: { duration: {
type: Number, type: Number,
value: 200, value: 200,
observer: 'updateChildrenData' observer: 'updateChildrenData',
}, },
direction: { direction: {
type: String, type: String,
value: 'down', value: 'down',
observer: 'updateChildrenData' observer: 'updateChildrenData',
}, },
closeOnClickOverlay: { closeOnClickOverlay: {
type: Boolean, type: Boolean,
value: true, value: true,
observer: 'updateChildrenData' observer: 'updateChildrenData',
}, },
closeOnClickOutside: { closeOnClickOutside: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
itemListData: [] itemListData: [],
}, },
beforeCreate() { beforeCreate() {
@ -66,13 +66,13 @@ VantComponent({
}, },
destroyed() { destroyed() {
ARRAY = ARRAY.filter(item => item !== this); ARRAY = ARRAY.filter((item) => item !== this);
}, },
methods: { methods: {
updateItemListData() { updateItemListData() {
this.setData({ this.setData({
itemListData: this.children.map((child: TrivialInstance) => child.data) itemListData: this.children.map((child: TrivialInstance) => child.data),
}); });
}, },
@ -105,7 +105,8 @@ VantComponent({
return this.getRect('.van-dropdown-menu').then( return this.getRect('.van-dropdown-menu').then(
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
const { top = 0, bottom = 0 } = rect; const { top = 0, bottom = 0 } = rect;
const offset = direction === 'down' ? bottom : this.windowHeight - top; const offset =
direction === 'down' ? bottom : this.windowHeight - top;
let wrapperStyle = `z-index: ${zIndex};`; let wrapperStyle = `z-index: ${zIndex};`;
@ -125,7 +126,7 @@ VantComponent({
const child = this.children[index]; const child = this.children[index];
if (!child.data.disabled) { if (!child.data.disabled) {
ARRAY.forEach(menuItem => { ARRAY.forEach((menuItem) => {
if ( if (
menuItem && menuItem &&
menuItem.data.closeOnClickOutside && menuItem.data.closeOnClickOutside &&
@ -137,6 +138,6 @@ VantComponent({
this.toggleItem(index); this.toggleItem(index);
} }
} },
} },
}); });

113
packages/field/README.md
View File

@ -32,13 +32,13 @@
```js ```js
Page({ Page({
data: { data: {
value: '' value: '',
}, },
onChange(event) { onChange(event) {
// event.detail 为当前输入的值 // event.detail 为当前输入的值
console.log(event.detail); console.log(event.detail);
} },
}); });
``` ```
@ -163,8 +163,7 @@ Page({
### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？ ### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？
由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。 由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
### 真机上 placeholder 为什么会盖过 popup 等其它组件？ ### 真机上 placeholder 为什么会盖过 popup 等其它组件？
@ -190,62 +189,62 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------- | ------- | | --- | --- | --- | --- |
| name | 在表单内提交时的标识符 | _string_ | - | | name | 在表单内提交时的标识符 | _string_ | - |
| label | 输入框左侧文本 | _string_ | - | | label | 输入框左侧文本 | _string_ | - |
| size | 单元格大小，可选值为 `large` | _string_ | - | | size | 单元格大小，可选值为 `large` | _string_ | - |
| value | 当前输入的值 | _string \| number_ | - | | value | 当前输入的值 | _string \| number_ | - |
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` | | type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` |
| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` | | fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` |
| focus | 获取焦点 | _boolean_ | `false` | | focus | 获取焦点 | _boolean_ | `false` |
| border | 是否显示内边框 | _boolean_ | `true` | | border | 是否显示内边框 | _boolean_ | `true` |
| disabled | 是否禁用输入框 | _boolean_ | `false` | | disabled | 是否禁用输入框 | _boolean_ | `false` |
| readonly | 是否只读 | _boolean_ | `false` | | readonly | 是否只读 | _boolean_ | `false` |
| clearable | 是否启用清除控件 | _boolean_ | `false` | | clearable | 是否启用清除控件 | _boolean_ | `false` |
| clickable | 是否开启点击反馈 | _boolean_ | `false` | | clickable | 是否开启点击反馈 | _boolean_ | `false` |
| required | 是否显示表单必填星号 | _boolean_ | `false` | | required | 是否显示表单必填星号 | _boolean_ | `false` |
| password | 是否是密码类型 | _boolean_ | `false` | | password | 是否是密码类型 | _boolean_ | `false` |
| title-width | 标题宽度 | _string_ | `90px` | | title-width | 标题宽度 | _string_ | `90px` |
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` | | maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
| placeholder | 输入框为空时占位符 | _string_ | - | | placeholder | 输入框为空时占位符 | _string_ | - |
| placeholder-style | 指定 placeholder 的样式 | _string_ | - | | placeholder-style | 指定 placeholder 的样式 | _string_ | - |
| custom-style | 自定义样式 | _string_ | - | | custom-style | 自定义样式 | _string_ | - |
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
| error | 是否将输入内容标红 | _boolean_ | `false` | | error | 是否将输入内容标红 | _boolean_ | `false` |
| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` | | error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` |
| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` | | error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` | | input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` | | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | | left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | | right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` | | confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` |
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` | | confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` |
| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` | | hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` |
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` | | cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` |
| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` | | adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` |
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` | | show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` |
| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` | | selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` |
| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` | | selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` |
| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` | | auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` |
| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` | | disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` |
| cursor | 指定 focus 时的光标位置 | _number_ | `-1` | | cursor | 指定 focus 时的光标位置 | _number_ | `-1` |
### Events ### Events
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- | | --- | --- | --- |
| bind:input | 输入内容时触发 | value: 当前输入值 | | bind:input | 输入内容时触发 | value: 当前输入值 |
| bind:change | 输入内容时触发 | value: 当前输入值 | | bind:change | 输入内容时触发 | value: 当前输入值 |
| bind:confirm | 点击完成按钮时触发 | value: 当前输入值 | | bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
| bind:click-icon | 点击尾部图标时触发 | - | | bind:click-icon | 点击尾部图标时触发 | - |
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 | | bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) | | bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
| bind:clear | 点击清空控件时触发 | - | | bind:clear | 点击清空控件时触发 | - |
| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } | | bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } | | bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } |
### Slot ### Slot

2
packages/field/index.json
View File

@ -4,4 +4,4 @@
"van-cell": "../cell/index", "van-cell": "../cell/index",
"van-icon": "../icon/index" "van-icon": "../icon/index"
} }
} }

18
packages/field/index.ts
View File

@ -22,13 +22,13 @@ VantComponent({
autosize: [Boolean, Object], autosize: [Boolean, Object],
readonly: { readonly: {
type: Boolean, type: Boolean,
observer: 'setShowClear' observer: 'setShowClear',
}, },
required: Boolean, required: Boolean,
iconClass: String, iconClass: String,
clearable: { clearable: {
type: Boolean, type: Boolean,
observer: 'setShowClear' observer: 'setShowClear',
}, },
clickable: Boolean, clickable: Boolean,
inputAlign: String, inputAlign: String,
@ -39,18 +39,18 @@ VantComponent({
errorMessageAlign: String, errorMessageAlign: String,
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
titleWidth: { titleWidth: {
type: String, type: String,
value: '90px' value: '90px',
} },
}, },
data: { data: {
focused: false, focused: false,
innerValue: '', innerValue: '',
showClear: false showClear: false,
}, },
created() { created() {
@ -133,10 +133,10 @@ VantComponent({
const { clearable, readonly } = this.data; const { clearable, readonly } = this.data;
const { focused, value } = this; const { focused, value } = this;
this.setData({ this.setData({
showClear: !!clearable && !!focused && !!value && !readonly showClear: !!clearable && !!focused && !!value && !readonly,
}); });
}, },
noop() {} noop() {},
} },
}); });

24
packages/field/props.ts
View File

@ -6,7 +6,7 @@ export const commonProps = {
this.setData({ innerValue: value }); this.setData({ innerValue: value });
this.value = value; this.value = value;
} }
} },
}, },
placeholder: String, placeholder: String,
placeholderStyle: String, placeholderStyle: String,
@ -14,41 +14,41 @@ export const commonProps = {
disabled: Boolean, disabled: Boolean,
maxlength: { maxlength: {
type: Number, type: Number,
value: -1 value: -1,
}, },
cursorSpacing: { cursorSpacing: {
type: Number, type: Number,
value: 50 value: 50,
}, },
autoFocus: Boolean, autoFocus: Boolean,
focus: Boolean, focus: Boolean,
cursor: { cursor: {
type: Number, type: Number,
value: -1 value: -1,
}, },
selectionStart: { selectionStart: {
type: Number, type: Number,
value: -1 value: -1,
}, },
selectionEnd: { selectionEnd: {
type: Number, type: Number,
value: -1 value: -1,
}, },
adjustPosition: { adjustPosition: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
holdKeyboard: Boolean holdKeyboard: Boolean,
}; };
export const inputProps = { export const inputProps = {
type: { type: {
type: String, type: String,
value: 'text' value: 'text',
}, },
password: Boolean, password: Boolean,
confirmType: String, confirmType: String,
confirmHold: Boolean confirmHold: Boolean,
}; };
export const textareaProps = { export const textareaProps = {
@ -56,10 +56,10 @@ export const textareaProps = {
fixed: Boolean, fixed: Boolean,
showConfirmBar: { showConfirmBar: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
disableDefaultPadding: { disableDefaultPadding: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
}; };

10
packages/goods-action-button/index.ts
View File

@ -19,8 +19,8 @@ VantComponent({
plain: Boolean, plain: Boolean,
type: { type: {
type: String, type: String,
value: 'danger' value: 'danger',
} },
}, },
mounted() { mounted() {
@ -39,8 +39,8 @@ VantComponent({
const index = children.indexOf(this); const index = children.indexOf(this);
this.setData({ this.setData({
isFirst: index === 0, isFirst: index === 0,
isLast: index === length - 1 isLast: index === length - 1,
}); });
} },
} },
}); });

6
packages/goods-action-icon/index.ts
View File

@ -15,13 +15,13 @@ VantComponent({
info: String, info: String,
icon: String, icon: String,
disabled: Boolean, disabled: Boolean,
loading: Boolean loading: Boolean,
}, },
methods: { methods: {
onClick(event: Weapp.Event) { onClick(event: Weapp.Event) {
this.$emit('click', event.detail); this.$emit('click', event.detail);
this.jumpLink(); this.jumpLink();
} },
} },
}); });

122
packages/goods-action/README.md
View File

@ -20,25 +20,14 @@
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-icon <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
icon="chat-o" <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
text="客服"
bind:click="onClickIcon"
/>
<van-goods-action-icon
icon="cart-o"
text="购物车"
bind:click="onClickIcon"
/>
<van-goods-action-button <van-goods-action-button
text="加入购物车" text="加入购物车"
type="warning" type="warning"
bind:click="onClickButton" bind:click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button text="立即购买" bind:click="onClickButton" />
text="立即购买"
bind:click="onClickButton"
/>
</van-goods-action> </van-goods-action>
``` ```
@ -50,7 +39,7 @@ Page({
onClickButton() { onClickButton() {
Toast('点击按钮'); Toast('点击按钮');
} },
}); });
``` ```
@ -81,6 +70,7 @@ Page({
<van-goods-action-button color="#7232dd" text="立即购买" /> <van-goods-action-button color="#7232dd" text="立即购买" />
</van-goods-action> </van-goods-action>
``` ```
### 朴素按钮 ### 朴素按钮
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色 通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
@ -90,7 +80,7 @@ Page({
<van-goods-action-icon icon="chat-o" text="客服" /> <van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" /> <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" /> <van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button color="#7232dd" text="加入购物" type="warning" /> <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />
<van-goods-action-button plain color="#7232dd" text="立即购买" /> <van-goods-action-button plain color="#7232dd" text="立即购买" />
</van-goods-action> </van-goods-action>
``` ```
@ -100,80 +90,80 @@ Page({
### GoodsAction Props ### GoodsAction Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | *boolean* | `true` | - | | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - |
### GoodsActionIcon Props ### GoodsActionIcon Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| text | 按钮文字 | *string* | - | - | | text | 按钮文字 | _string_ | - | - |
| icon | 图标类型，可选值见`icon`组件 | *string* | - | - | | icon | 图标类型，可选值见`icon`组件 | _string_ | - | - |
| info | 图标右上角提示信息 | *string \| number* | - | - | | info | 图标右上角提示信息 | _string \| number_ | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - | | url | 点击后跳转的链接地址 | _string_ | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
| id | 标识符 | *string* | - | - | | id | 标识符 | _string_ | - | - |
| disabled | 是否禁用按钮 | *boolean* | `false` | - | | disabled | 是否禁用按钮 | _boolean_ | `false` | - |
| loading | 是否显示为加载状态 | *boolean* | `false` | - | | loading | 是否显示为加载状态 | _boolean_ | `false` | - |
| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - | | open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
| app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | - | | app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | - | | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | - |
| session-from | 会话来源 | *string* | - | - | | session-from | 会话来源 | _string_ | - | - |
| send-message-title | 会话内消息卡片标题 | *string* | 当前标题 | - | | send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | - | | send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - |
| send-message-img | sendMessageImg | *string* | 截图 | - | | send-message-img | sendMessageImg | _string_ | 截图 | - |
| show-message-card | 显示会话内消息卡片 | *string* | `false` | - | | show-message-card | 显示会话内消息卡片 | _string_ | `false` | - |
### GoodsActionButton Props ### GoodsActionButton Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| text | 按钮文字 | *string* | - | - | | text | 按钮文字 | _string_ | - | - |
| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | *string* | - | - | | color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - | | url | 点击后跳转的链接地址 | _string_ | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
| id | 标识符 | *string* | - | - | | id | 标识符 | _string_ | - | - |
| type | 按钮类型，可选值为 `primary` `warning` `danger` | *string* | `danger` | - | | type | 按钮类型，可选值为 `primary` `warning` `danger` | _string_ | `danger` | - |
| plain | 是否为朴素按钮 | *boolean* | `false` | - | | plain | 是否为朴素按钮 | _boolean_ | `false` | - |
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | *string* | `normal` | - | | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - |
| disabled | 是否禁用按钮 | *boolean* | `false` | - | | disabled | 是否禁用按钮 | _boolean_ | `false` | - |
| loading | 是否显示为加载状态 | *boolean* | `false` | - | | loading | 是否显示为加载状态 | _boolean_ | `false` | - |
| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - | | open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
| app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | - | | app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | - | | lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | - |
| session-from | 会话来源 | *string* | - | - | | session-from | 会话来源 | _string_ | - | - |
| send-message-title | 会话内消息卡片标题 | *string* | 当前标题 | - | | send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | - | | send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - |
| send-message-img | sendMessageImg | *string* | 截图 | - | | send-message-img | sendMessageImg | _string_ | 截图 | - |
| show-message-card | 显示会话内消息卡片 | *string* | `false` | - | | show-message-card | 显示会话内消息卡片 | _string_ | `false` | - |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | ------ | ---------------- | ---- |
| click | 按钮点击事件回调 | - | | click | 按钮点击事件回调 | - |
### GoodsActionIcon Slot ### GoodsActionIcon Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---- | ---------- |
| icon | 自定义图标 | | icon | 自定义图标 |
### GoodsActionButton Slot ### GoodsActionButton Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---- | ------------ |
| - | 按钮显示内容 | | - | 按钮显示内容 |
### GoodsActionIcon 外部样式类 ### GoodsActionIcon 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ---------- | ---------- |
| icon-class | 图标样式类 | | icon-class | 图标样式类 |
| text-class | 文字样式类 | | text-class | 文字样式类 |
### GoodsActionButton 外部样式类 ### GoodsActionButton 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

6
packages/goods-action/index.ts
View File

@ -9,7 +9,7 @@ VantComponent({
props: { props: {
safeAreaInsetBottom: { safeAreaInsetBottom: {
type: Boolean, type: Boolean,
value: true value: true,
} },
} },
}); });

8
packages/grid-item/index.ts
View File

@ -18,7 +18,7 @@ VantComponent({
dot: Boolean, dot: Boolean,
info: null, info: null,
text: String, text: String,
useSlot: Boolean useSlot: Boolean,
}, },
data: { data: {
@ -75,13 +75,13 @@ VantComponent({
border, border,
square, square,
gutter, gutter,
clickable clickable,
}); });
}, },
onClick() { onClick() {
this.$emit('click'); this.$emit('click');
this.jumpLink(); this.jumpLink();
} },
} },
}); });

58
packages/grid/README.md
View File

@ -114,51 +114,51 @@
### Grid Props ### Grid Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| column-num | 列数 | *number* | `4` | - | | column-num | 列数 | _number_ | `4` | - |
| gutter | 格子之间的间距，默认单位为`px` | *string \| number* | `0` | - | | gutter | 格子之间的间距，默认单位为`px` | _string \| number_ | `0` | - |
| border | 是否显示边框 | *boolean* | `true` | - | | border | 是否显示边框 | _boolean_ | `true` | - |
| center | 是否将格子内容居中显示 | *boolean* | `true` | - | | center | 是否将格子内容居中显示 | _boolean_ | `true` | - |
| square | 是否将格子固定为正方形 | *boolean* | `false` | - | | square | 是否将格子固定为正方形 | _boolean_ | `false` | - |
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | - | | clickable | 是否开启格子点击反馈 | _boolean_ | `false` | - |
| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` | | use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` |
### Grid 外部样式类 ### Grid 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
### GridItem Props ### GridItem Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| text | 文字 | *string* | - | - | | text | 文字 | _string_ | - | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - | - | | icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - | | dot | 是否显示图标右上角小红点 | _boolean_ | `false` | - |
| info | 图标右上角徽标的内容 | *string \| number* | - | - | | info | 图标右上角徽标的内容 | _string \| number_ | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - | | url | 点击后跳转的链接地址 | _string_ | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
### GridItem Events ### GridItem Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|-----------|-----------|-----------| | ---------- | -------------- | -------- |
| bind:click | 点击格子时触发 | - | | bind:click | 点击格子时触发 | - |
### GridItem Slots ### GridItem Slots
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---- | ------------------------------------------------------ |
| - | 自定义宫格的所有内容，需要设置`use-slot`属性 | | - | 自定义宫格的所有内容，需要设置`use-slot`属性 |
| icon | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 | | icon | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 |
| text | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 | | text | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 |
### GridItem 外部样式类 ### GridItem 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------- | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| content-class | 内容样式类 | | content-class | 内容样式类 |
| icon-class | 图标样式类 | | icon-class | 图标样式类 |
| text-class | 文本样式类 | | text-class | 文本样式类 |

20
packages/grid/index.ts
View File

@ -11,32 +11,32 @@ VantComponent({
props: { props: {
square: { square: {
type: Boolean, type: Boolean,
observer: 'updateChildren' observer: 'updateChildren',
}, },
gutter: { gutter: {
type: [Number, String], type: [Number, String],
value: 0, value: 0,
observer: 'updateChildren' observer: 'updateChildren',
}, },
clickable: { clickable: {
type: Boolean, type: Boolean,
observer: 'updateChildren' observer: 'updateChildren',
}, },
columnNum: { columnNum: {
type: Number, type: Number,
value: 4, value: 4,
observer: 'updateChildren' observer: 'updateChildren',
}, },
center: { center: {
type: Boolean, type: Boolean,
value: true, value: true,
observer: 'updateChildren' observer: 'updateChildren',
}, },
border: { border: {
type: Boolean, type: Boolean,
value: true, value: true,
observer: 'updateChildren' observer: 'updateChildren',
} },
}, },
data: { data: {
@ -47,7 +47,7 @@ VantComponent({
const { gutter } = this.data; const { gutter } = this.data;
if (gutter) { if (gutter) {
this.setData({ this.setData({
viewStyle: `padding-left: ${addUnit(gutter)}` viewStyle: `padding-left: ${addUnit(gutter)}`,
}); });
} }
}, },
@ -59,6 +59,6 @@ VantComponent({
child.updateStyle(); child.updateStyle();
} }
); );
} },
} },
}); });

30
packages/icon/README.md
View File

@ -2,7 +2,7 @@
### 介绍 ### 介绍
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用 基于字体的图标集， 可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
### 引入 ### 引入
@ -55,30 +55,30 @@
### 开发者工具上提示 Faild to load font 是什么情况？ ### 开发者工具上提示 Faild to load font 是什么情况？
这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html)注意第5条 这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html)注意第 5 条
## API ## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| name | 图标名称或图片链接 | *string* | - | - | | name | 图标名称或图片链接 | _string_ | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - | | dot | 是否显示图标右上角小红点 | _boolean_ | `false` | - |
| info | 图标右上角文字提示 | *string \| number* | - | - | | info | 图标右上角文字提示 | _string \| number_ | - | - |
| color | 图标颜色 | *string* | `inherit` | - | | color | 图标颜色 | _string_ | `inherit` | - |
| size | 图标大小，如 `20px`，`2em`，默认单位为`px` | *string \| number* | `inherit` | - | | size | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit` | - |
| custom-style | 自定义样式 | *string* | - | - | | custom-style | 自定义样式 | _string_ | - | - |
| class-prefix | 类名前缀 | *string* | `van-icon` | - | | class-prefix | 类名前缀 | _string_ | `van-icon` | - |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | ---------- | -------------- | ---- |
| bind:click | 点击图标时触发 | - | | bind:click | 点击图标时触发 | - |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

12
packages/icon/index.ts
View File

@ -9,21 +9,21 @@ VantComponent({
customStyle: String, customStyle: String,
classPrefix: { classPrefix: {
type: String, type: String,
value: 'van-icon' value: 'van-icon',
}, },
name: { name: {
type: String, type: String,
observer(val) { observer(val) {
this.setData({ this.setData({
isImageName: val.indexOf('/') !== -1 isImageName: val.indexOf('/') !== -1,
}); });
} },
} },
}, },
methods: { methods: {
onClick() { onClick() {
this.$emit('click'); this.$emit('click');
} },
} },
}); });

91
packages/image/README.md
View File

@ -20,14 +20,10 @@
### 基础用法 ### 基础用法
基础用法与原生 [image]((https://developers.weixin.qq.com/miniprogram/dev/component/image.html)) 标签一致，可以设置`src`、`width`、`height`等原生属性 基础用法与原生 [image](<(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)>) 标签一致，可以设置`src`、`width`、`height`等原生属性
```html ```html
<van-image <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
``` ```
### 填充模式 ### 填充模式
@ -75,12 +71,7 @@
```html ```html
<van-image use-loading-slot> <van-image use-loading-slot>
<van-loading <van-loading slot="loading" type="spinner" size="20" vertical />
slot="loading"
type="spinner"
size="20"
vertical
/>
</van-image> </van-image>
``` ```
@ -99,52 +90,52 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| | --- | --- | --- | --- | --- |
| src | 图片链接 | *string* | - | - | | src | 图片链接 | _string_ | - | - |
| fit | 图片填充模式 | *string* | *fill* | - | | fit | 图片填充模式 | _string_ | _fill_ | - |
| alt | 替代文本 | *string* | - | - | | alt | 替代文本 | _string_ | - | - |
| width | 宽度，默认单位为`px` | *string \| number* | - | - | | width | 宽度，默认单位为`px` | _string \| number_ | - | - |
| height | 高度，默认单位为`px` | *string \| number* | - | - | | height | 高度，默认单位为`px` | _string \| number_ | - | - |
| radius | 圆角大小，默认单位为`px` | *string \| number* | `0` | - | | radius | 圆角大小，默认单位为`px` | _string \| number_ | `0` | - |
| round | 是否显示为圆形 | *boolean* | `false` | - | | round | 是否显示为圆形 | _boolean_ | `false` | - |
| lazy-load | 是否懒加载 | *boolean* | `false` | - | | lazy-load | 是否懒加载 | _boolean_ | `false` | - |
| show-error | 是否展示图片加载失败提示 | *boolean* | `true` | - | | show-error | 是否展示图片加载失败提示 | _boolean_ | `true` | - |
| show-loading | 是否展示图片加载中提示 | *boolean* | `true` | - | | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` | - |
| use-error-slot | 是否使用 error 插槽 | *boolean* | `false` | - | | use-error-slot | 是否使用 error 插槽 | _boolean_ | `false` | - |
| use-loading-slot | 是否使用 loading 插槽 | *boolean* | `false` | - | | use-loading-slot | 是否使用 loading 插槽 | _boolean_ | `false` | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | *boolean* | `false` | - | | show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | _boolean_ | `false` | - |
### 图片填充模式 ### 图片填充模式 
| 名称 | 含义 | | 名称 | 含义 |
|------|------| | --------- | ------------------------------------------------------ |
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | | contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | | cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
| fill | 拉伸图片，使图片填满元素 | | fill | 拉伸图片，使图片填满元素 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | | widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | | heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| none | 保持图片原有尺寸 | | none | 保持图片原有尺寸 |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------ | ------------ |
| click | 点击图片时触发 | event: Event | | click | 点击图片时触发 | event: Event |
| load | 图片加载完毕时触发 | event: Event | | load | 图片加载完毕时触发 | event: Event |
| error | 图片加载失败时触发 | event: Event | | error | 图片加载失败时触发 | event: Event |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------------------- |
| loading | 自定义加载中的提示内容 | | loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 | | error | 自定义加载失败时的提示内容 |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------- | -------------- |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| image-class | 图片样式类 | | image-class | 图片样式类 |
| loading-class | loading样式类 | | loading-class | loading 样式类 |
| error-class | error样式类 | | error-class | error 样式类 |

26
packages/image/index.ts
View File

@ -9,7 +9,7 @@ const FIT_MODE_MAP = {
cover: 'aspectFill', cover: 'aspectFill',
contain: 'aspectFit', contain: 'aspectFit',
widthFix: 'widthFix', widthFix: 'widthFix',
heightFix: 'heightFix' heightFix: 'heightFix',
}; };
VantComponent({ VantComponent({
@ -23,18 +23,18 @@ VantComponent({
observer() { observer() {
this.setData({ this.setData({
error: false, error: false,
loading: true loading: true,
}); });
} },
}, },
round: Boolean, round: Boolean,
width: { width: {
type: null, type: null,
observer: 'setStyle' observer: 'setStyle',
}, },
height: { height: {
type: null, type: null,
observer: 'setStyle' observer: 'setStyle',
}, },
radius: null, radius: null,
lazyLoad: Boolean, lazyLoad: Boolean,
@ -44,16 +44,16 @@ VantComponent({
fit: { fit: {
type: String, type: String,
value: 'fill', value: 'fill',
observer: 'setMode' observer: 'setMode',
}, },
showError: { showError: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
showLoading: { showLoading: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
@ -96,7 +96,7 @@ VantComponent({
onLoad(event) { onLoad(event) {
this.setData({ this.setData({
loading: false loading: false,
}); });
this.$emit('load', event.detail); this.$emit('load', event.detail);
@ -105,7 +105,7 @@ VantComponent({
onError(event) { onError(event) {
this.setData({ this.setData({
loading: false, loading: false,
error: true error: true,
}); });
this.$emit('error', event.detail); this.$emit('error', event.detail);
@ -113,6 +113,6 @@ VantComponent({
onClick(event) { onClick(event) {
this.$emit('click', event.detail); this.$emit('click', event.detail);
} },
} },
}); });

12
packages/index-anchor/index.ts
View File

@ -4,18 +4,18 @@ VantComponent({
relation: { relation: {
name: 'index-bar', name: 'index-bar',
type: 'ancestor', type: 'ancestor',
current: 'index-anchor' current: 'index-anchor',
}, },
props: { props: {
useSlot: Boolean, useSlot: Boolean,
index: null index: null,
}, },
data: { data: {
active: false, active: false,
wrapperStyle: '', wrapperStyle: '',
anchorStyle: '' anchorStyle: '',
}, },
methods: { methods: {
@ -24,7 +24,7 @@ VantComponent({
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
wx.pageScrollTo({ wx.pageScrollTo({
duration: 0, duration: 0,
scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
}); });
} }
); );
@ -32,6 +32,6 @@ VantComponent({
getBoundingClientRect() { getBoundingClientRect() {
return this.getRect('.van-index-anchor-wrapper'); return this.getRect('.van-index-anchor-wrapper');
} },
} },
}); });

32
packages/index-bar/README.md
View File

@ -66,7 +66,7 @@
```javascript ```javascript
Page({ Page({
data: { data: {
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
}, },
}); });
``` ```
@ -76,28 +76,28 @@ Page({
### IndexBar Props ### IndexBar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| | --- | --- | --- | --- | --- |
| index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | - | | index-list | 索引字符列表 | _string[] \| number[]_ | `A-Z` | - |
| z-index | z-index 层级 | *number* | `1` | - | | z-index | z-index 层级 | _number_ | `1` | - |
| sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | - | | sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` | - |
| sticky-offset-top | 锚点自动吸顶时与顶部的距离 | *number* | `0` | - | | sticky-offset-top | 锚点自动吸顶时与顶部的距离 | _number_ | `0` | - |
| highlight-color | 索引字符高亮颜色 | *string* | `#07c160` | - | | highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` | - |
### IndexAnchor Props ### IndexAnchor Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| | -------- | ------------------------ | ------------------ | ------- | ---- |
| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` | - | | use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` | - |
| index | 索引字符 | *string \| number* | - | - | | index | 索引字符 | _string \| number_ | - | - |
### IndexBar Events ### IndexBar Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | --------------- |
| select | 选中字符时触发 | index: 索引字符 | | select | 选中字符时触发 | index: 索引字符 |
### IndexAnchor Slots ### IndexAnchor Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---- | -------------------------------- |
| - | 锚点位置显示内容，默认为索引字符 | | - | 锚点位置显示内容，默认为索引字符 |

58
packages/index-bar/index.ts
View File

@ -23,42 +23,42 @@ VantComponent({
}, },
unlinked() { unlinked() {
this.updateData(); this.updateData();
} },
}, },
props: { props: {
sticky: { sticky: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
zIndex: { zIndex: {
type: Number, type: Number,
value: 1 value: 1,
}, },
highlightColor: { highlightColor: {
type: String, type: String,
value: GREEN value: GREEN,
}, },
stickyOffsetTop: { stickyOffsetTop: {
type: Number, type: Number,
value: 0 value: 0,
}, },
indexList: { indexList: {
type: Array, type: Array,
value: indexList() value: indexList(),
} },
}, },
mixins: [ mixins: [
pageScrollMixin(function(event) { pageScrollMixin(function (event) {
this.scrollTop = event.scrollTop || 0; this.scrollTop = event.scrollTop || 0;
this.onScroll(); this.onScroll();
}) }),
], ],
data: { data: {
activeAnchorIndex: null, activeAnchorIndex: null,
showSidebar: false showSidebar: false,
}, },
created() { created() {
@ -74,7 +74,7 @@ VantComponent({
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.setData({ this.setData({
showSidebar: !!this.children.length showSidebar: !!this.children.length,
}); });
this.setRect().then(() => { this.setRect().then(() => {
@ -88,20 +88,20 @@ VantComponent({
return Promise.all([ return Promise.all([
this.setAnchorsRect(), this.setAnchorsRect(),
this.setListRect(), this.setListRect(),
this.setSiderbarRect() this.setSiderbarRect(),
]); ]);
}, },
setAnchorsRect() { setAnchorsRect() {
return Promise.all( return Promise.all(
this.children.map(anchor => this.children.map((anchor) =>
anchor anchor
.getRect('.van-index-anchor-wrapper') .getRect('.van-index-anchor-wrapper')
.then( .then(
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
Object.assign(anchor, { Object.assign(anchor, {
height: rect.height, height: rect.height,
top: rect.top + this.scrollTop top: rect.top + this.scrollTop,
}); });
} }
) )
@ -114,17 +114,17 @@ VantComponent({
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
Object.assign(this, { Object.assign(this, {
height: rect.height, height: rect.height,
top: rect.top + this.scrollTop top: rect.top + this.scrollTop,
}); });
} }
); );
}, },
setSiderbarRect() { setSiderbarRect() {
return this.getRect('.van-index-bar__sidebar').then(res => { return this.getRect('.van-index-bar__sidebar').then((res) => {
this.sidebar = { this.sidebar = {
height: res.height, height: res.height,
top: res.top top: res.top,
}; };
}); });
}, },
@ -132,7 +132,7 @@ VantComponent({
setDiffData({ target, data }) { setDiffData({ target, data }) {
const diffData = {}; const diffData = {};
Object.keys(data).forEach(key => { Object.keys(data).forEach((key) => {
if (target.data[key] !== data[key]) { if (target.data[key] !== data[key]) {
diffData[key] = data[key]; diffData[key] = data[key];
} }
@ -148,7 +148,7 @@ VantComponent({
.getRect('.van-index-anchor-wrapper') .getRect('.van-index-anchor-wrapper')
.then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => ({ .then((rect: WechatMiniprogram.BoundingClientRectCallbackResult) => ({
height: rect.height, height: rect.height,
top: rect.top top: rect.top,
})); }));
}, },
@ -182,8 +182,8 @@ VantComponent({
this.setDiffData({ this.setDiffData({
target: this, target: this,
data: { data: {
activeAnchorIndex: active activeAnchorIndex: active,
} },
}); });
if (sticky) { if (sticky) {
@ -219,8 +219,8 @@ VantComponent({
data: { data: {
active: true, active: true,
anchorStyle, anchorStyle,
wrapperStyle wrapperStyle,
} },
}); });
} else if (index === active - 1) { } else if (index === active - 1) {
const currentAnchor = children[index]; const currentAnchor = children[index];
@ -245,8 +245,8 @@ VantComponent({
target: item, target: item,
data: { data: {
active: true, active: true,
anchorStyle anchorStyle,
} },
}); });
} else { } else {
this.setDiffData({ this.setDiffData({
@ -254,8 +254,8 @@ VantComponent({
data: { data: {
active: false, active: false,
anchorStyle: '', anchorStyle: '',
wrapperStyle: '' wrapperStyle: '',
} },
}); });
} }
}); });
@ -301,6 +301,6 @@ VantComponent({
anchor.scrollIntoView(this.scrollTop); anchor.scrollIntoView(this.scrollTop);
this.$emit('select', anchor.data.index); this.$emit('select', anchor.data.index);
} }
} },
} },
}); });

4
packages/info/index.ts
View File

@ -4,6 +4,6 @@ VantComponent({
props: { props: {
dot: Boolean, dot: Boolean,
info: null, info: null,
customStyle: String customStyle: String,
} },
}); });

28
packages/loading/README.md
View File

@ -15,15 +15,13 @@
### 加载类型 ### 加载类型
```html ```html
<van-loading /> <van-loading /> <van-loading type="spinner" />
<van-loading type="spinner" />
``` ```
### 自定义颜色 ### 自定义颜色
```html ```html
<van-loading color="#1989fa" /> <van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
``` ```
### 加载文案 ### 加载文案
@ -43,21 +41,21 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| color | 颜色 | *string* | `#c9c9c9` | - | | color | 颜色 | _string_ | `#c9c9c9` | - |
| type | 类型，可选值为 `spinner` | *string* | `circular` | - | | type | 类型，可选值为 `spinner` | _string_ | `circular` | - |
| size | 加载图标大小，默认单位为 `px` | *string \| number* | `30px` | - | | size | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px` | - |
| text-size | 文字大小，默认单位为为 `px` | *string \| number* | `14px` | 1.0.0 | | text-size | 文字大小，默认单位为为 `px` | _string \| number_ | `14px` | 1.0.0 |
| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | 1.0.0 | | vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | 1.0.0 |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
| --- | --- | | ---- | -------- |
| - | 加载文案 | | - | 加载文案 |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

2
packages/loading/index.json
View File

@ -1,3 +1,3 @@
{ {
"component": true "component": true
} }

4
packages/loading/index.ts
View File

@ -6,10 +6,10 @@ VantComponent({
vertical: Boolean, vertical: Boolean,
type: { type: {
type: String, type: String,
value: 'circular' value: 'circular',
}, },
size: String, size: String,
textSize: String textSize: String,
}, },
data: { data: {

13
packages/mixins/basic.ts
View File

@ -7,14 +7,15 @@ export const basic = Behavior({
set(data: object, callback: Function) { set(data: object, callback: Function) {
this.setData(data, callback); this.setData(data, callback);
return new Promise(resolve => wx.nextTick(resolve)); return new Promise((resolve) => wx.nextTick(resolve));
}, },
getRect(selector: string, all: boolean) { getRect(selector: string, all: boolean) {
return new Promise(resolve => { return new Promise((resolve) => {
wx.createSelectorQuery() wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector) .in(this)
.boundingClientRect(rect => { [all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && Array.isArray(rect) && rect.length) { if (all && Array.isArray(rect) && rect.length) {
resolve(rect); resolve(rect);
} }
@ -25,6 +26,6 @@ export const basic = Behavior({
}) })
.exec(); .exec();
}); });
} },
} },
}); });

4
packages/mixins/button.ts
View File

@ -11,6 +11,6 @@ export const button = Behavior({
sendMessageImg: String, sendMessageImg: String,
showMessageCard: Boolean, showMessageCard: Boolean,
appParameter: String, appParameter: String,
ariaLabel: String ariaLabel: String,
} },
}); });

8
packages/mixins/link.ts
View File

@ -3,8 +3,8 @@ export const link = Behavior({
url: String, url: String,
linkType: { linkType: {
type: String, type: String,
value: 'navigateTo' value: 'navigateTo',
} },
}, },
methods: { methods: {
@ -13,6 +13,6 @@ export const link = Behavior({
if (url) { if (url) {
wx[this.data.linkType]({ url }); wx[this.data.linkType]({ url });
} }
} },
} },
}); });

4
packages/mixins/open-type.ts
View File

@ -2,7 +2,7 @@ import { Weapp } from 'definitions/weapp';
export const openType = Behavior({ export const openType = Behavior({
properties: { properties: {
openType: String openType: String,
}, },
methods: { methods: {
@ -29,5 +29,5 @@ export const openType = Behavior({
bindOpenSetting(event: Partial<Weapp.Event>) { bindOpenSetting(event: Partial<Weapp.Event>) {
this.$emit('opensetting', event.detail); this.$emit('opensetting', event.detail);
}, },
} },
}); });

4
packages/mixins/page-scroll.ts
View File

@ -36,7 +36,7 @@ export const pageScrollMixin = (scroller: Scroller) =>
detached() { detached() {
const page = getCurrentPage(); const page = getCurrentPage();
page.vanPageScroller = (page.vanPageScroller || []).filter( page.vanPageScroller = (page.vanPageScroller || []).filter(
item => item !== scroller (item) => item !== scroller
); );
} },
}); });

7
packages/mixins/touch.ts
View File

@ -37,7 +37,8 @@ export const touch = Behavior({
this.deltaY = touch.clientY - this.startY; this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX); this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY); this.offsetY = Math.abs(this.deltaY);
this.direction = this.direction || getDirection(this.offsetX, this.offsetY); this.direction =
} this.direction || getDirection(this.offsetX, this.offsetY);
} },
},
}); });

28
packages/mixins/transition.ts
View File

@ -4,12 +4,12 @@ const getClassNames = (name: string) => ({
enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`, enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`, 'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`, leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class` 'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`,
}); });
const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30)); const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));
export const transition = function(showDefaultValue: boolean) { export const transition = function (showDefaultValue: boolean) {
return Behavior({ return Behavior({
properties: { properties: {
customStyle: String, customStyle: String,
@ -17,24 +17,24 @@ export const transition = function(showDefaultValue: boolean) {
show: { show: {
type: Boolean, type: Boolean,
value: showDefaultValue, value: showDefaultValue,
observer: 'observeShow' observer: 'observeShow',
}, },
// @ts-ignore // @ts-ignore
duration: { duration: {
type: null, type: null,
value: 300, value: 300,
observer: 'observeDuration' observer: 'observeDuration',
}, },
name: { name: {
type: String, type: String,
value: 'fade' value: 'fade',
} },
}, },
data: { data: {
type: '', type: '',
inited: false, inited: false,
display: false display: false,
}, },
methods: { methods: {
@ -63,7 +63,7 @@ export const transition = function(showDefaultValue: boolean) {
inited: true, inited: true,
display: true, display: true,
classes: classNames.enter, classes: classNames.enter,
currentDuration currentDuration,
}); });
}) })
.then(nextTick) .then(nextTick)
@ -72,7 +72,7 @@ export const transition = function(showDefaultValue: boolean) {
this.transitionEnded = false; this.transitionEnded = false;
this.setData({ this.setData({
classes: classNames['enter-to'] classes: classNames['enter-to'],
}); });
}) })
.catch(() => {}); .catch(() => {});
@ -98,7 +98,7 @@ export const transition = function(showDefaultValue: boolean) {
this.setData({ this.setData({
classes: classNames.leave, classes: classNames.leave,
currentDuration currentDuration,
}); });
}) })
.then(nextTick) .then(nextTick)
@ -108,7 +108,7 @@ export const transition = function(showDefaultValue: boolean) {
setTimeout(() => this.onTransitionEnd(), currentDuration); setTimeout(() => this.onTransitionEnd(), currentDuration);
this.setData({ this.setData({
classes: classNames['leave-to'] classes: classNames['leave-to'],
}); });
}) })
.catch(() => {}); .catch(() => {});
@ -132,7 +132,7 @@ export const transition = function(showDefaultValue: boolean) {
if (!show && display) { if (!show && display) {
this.setData({ display: false }); this.setData({ display: false });
} }
} },
} },
}); });
}; };

45
packages/nav-bar/README.md
View File

@ -32,11 +32,12 @@ Page({
}, },
onClickRight() { onClickRight() {
wx.showToast({ title: '点击按钮', icon: 'none' }); wx.showToast({ title: '点击按钮', icon: 'none' });
} },
}); });
``` ```
### 高级用法 ### 高级用法
通过 slot 定制内容 通过 slot 定制内容
```html ```html
@ -50,35 +51,35 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| title | 标题 | *string* | `''` | - | | title | 标题 | _string_ | `''` | - |
| left-text | 左侧文案 | *string* | `''` | - | | left-text | 左侧文案 | _string_ | `''` | - |
| right-text | 右侧文案 | *string* | `''` | - | | right-text | 右侧文案 | _string_ | `''` | - |
| left-arrow | 是否显示左侧箭头 | *boolean* | `false` | - | | left-arrow | 是否显示左侧箭头 | _boolean_ | `false` | - |
| fixed | 是否固定在顶部 | *boolean* | `false` | - | | fixed | 是否固定在顶部 | _boolean_ | `false` | - |
| placeholder | 固定在顶部时是否开启占位 | *boolean* | `false` | - | | placeholder | 固定在顶部时是否开启占位 | _boolean_ | `false` | - |
| border | 是否显示下边框 | *boolean* | `true` | - | | border | 是否显示下边框 | _boolean_ | `true` | - |
| z-index | 元素 z-index | *number* | `1` | - | | z-index | 元素 z-index | _number_ | `1` | - |
| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | *boolean* | `true` | - | | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true` | - |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ----- | ------------------ |
| title | 自定义标题 | | title | 自定义标题 |
| left | 自定义左侧区域内容 | | left | 自定义左侧区域内容 |
| right | 自定义右侧区域内容 | | right | 自定义右侧区域内容 |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | ---------------- | ------------------ | ---- |
| bind:click-left | 点击左侧按钮时触发 | - | | bind:click-left | 点击左侧按钮时触发 | - |
| bind:click-right | 点击右侧按钮时触发 | - | | bind:click-right | 点击右侧按钮时触发 | - |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |
| title-class | 标题样式类 | | title-class | 标题样式类 |

20
packages/nav-bar/index.ts
View File

@ -7,39 +7,39 @@ VantComponent({
title: String, title: String,
fixed: { fixed: {
type: Boolean, type: Boolean,
observer: 'setHeight' observer: 'setHeight',
}, },
placeholder: { placeholder: {
type: Boolean, type: Boolean,
observer: 'setHeight' observer: 'setHeight',
}, },
leftText: String, leftText: String,
rightText: String, rightText: String,
leftArrow: Boolean, leftArrow: Boolean,
border: { border: {
type: Boolean, type: Boolean,
value: true value: true,
}, },
zIndex: { zIndex: {
type: Number, type: Number,
value: 1 value: 1,
}, },
safeAreaInsetTop: { safeAreaInsetTop: {
type: Boolean, type: Boolean,
value: true value: true,
} },
}, },
data: { data: {
statusBarHeight: 0, statusBarHeight: 0,
height: 44 height: 44,
}, },
created() { created() {
const { statusBarHeight } = wx.getSystemInfoSync(); const { statusBarHeight } = wx.getSystemInfoSync();
this.setData({ this.setData({
statusBarHeight, statusBarHeight,
height: 44 + statusBarHeight height: 44 + statusBarHeight,
}); });
}, },
@ -68,6 +68,6 @@ VantComponent({
} }
); );
}); });
} },
} },
}); });

44
packages/notice-bar/README.md
View File

@ -22,6 +22,7 @@
``` ```
### 禁用滚动 ### 禁用滚动
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动 文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
```html ```html
@ -32,6 +33,7 @@
``` ```
### 多行展示 ### 多行展示
禁用滚动时，可以设置`wrapable`来开启多行展示 禁用滚动时，可以设置`wrapable`来开启多行展示
```html ```html
@ -43,16 +45,20 @@
``` ```
### 使用左右插槽 ### 使用左右插槽
使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容 使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容
```html ```html
<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"> <van-notice-bar
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
>
<text slot="left-icon">[公告]</text> <text slot="left-icon">[公告]</text>
<text slot="right-icon">[结束]</text> <text slot="right-icon">[结束]</text>
</van-notice-bar> </van-notice-bar>
``` ```
### 通告栏模式 ### 通告栏模式
默认模式为空，支持`closeable`和`link`。 默认模式为空，支持`closeable`和`link`。
```html ```html
@ -68,7 +74,9 @@
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
/> />
``` ```
### 自定义滚动速率 ### 自定义滚动速率
使用`speed`属性控制滚动速率 使用`speed`属性控制滚动速率
```html ```html
@ -84,31 +92,31 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------| | --- | --- | --- | --- | --- |
| mode | 通告栏模式，可选值为 `closeable` `link` | *string* | `''` | - | | mode | 通告栏模式，可选值为 `closeable` `link` | _string_ | `''` | - |
| delay | 动画延迟时间 (s) | *number* | `1` | - | | delay | 动画延迟时间 (s) | _number_ | `1` | - |
| speed | 滚动速率 (px/s) | *number* | `50` | - | | speed | 滚动速率 (px/s) | _number_ | `50` | - |
| scrollable | 是否在长度溢出时滚动播放 | *boolean* | `true` | - | | scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` | - |
| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | *string* | - | - | | left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| color | 文本颜色 | *string* | `#ed6a0c` | - | | color | 文本颜色 | _string_ | `#ed6a0c` | - |
| backgroundColor | 滚动条背景 | *string* | `#fffbe8` | - | | backgroundColor | 滚动条背景 | _string_ | `#fffbe8` | - |
| open-type | 微信开放能力 | *string* | `navigate` | - | | open-type | 微信开放能力 | _string_ | `navigate` | - |
### Events ### Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| | ---------- | ------------ | ---- |
| bind:click | 点击事件回调 | - | | bind:click | 点击事件回调 | - |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| | ---------- | ------------------ |
| left-icon | 自定义左侧固定内容 | | left-icon | 自定义左侧固定内容 |
| right-icon | 自定义右侧固定内容 | | right-icon | 自定义右侧固定内容 |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
|-----------|-----------| | ------------ | ------------ |
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

2
packages/notice-bar/index.json
View File

@ -3,4 +3,4 @@
"usingComponents": { "usingComponents": {
"van-icon": "../icon/index" "van-icon": "../icon/index"
} }
} }

Some files were not shown because too many files have changed in this diff Show More