blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +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 lessCompiler = dist =>
const lessCompiler = (dist) =>
function compileLess() {
return gulp
.src(`${src}/**/*.less`)
@ -55,21 +55,21 @@ const copier = (dist, ext) =>
return gulp.src(`${src}/**/*.${ext}`).pipe(gulp.dest(dist));
};
const staticCopier = dist =>
const staticCopier = (dist) =>
gulp.parallel(
copier(dist, 'wxml'),
copier(dist, 'wxs'),
copier(dist, 'json')
);
const cleaner = path =>
const cleaner = (path) =>
function clean() {
return exec(`npx rimraf ${path}`);
};
const tasks = [
['buildEs', esDir, esConfig],
['buildLib', libDir, libConfig]
['buildLib', libDir, libConfig],
].reduce((prev, [name, ...args]) => {
prev[name] = gulp.series(
cleaner(...args),

4
build/dev.js
View File

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

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

@ -7,30 +7,30 @@ module.exports = {
mode: 'development',
entry: {
'vant-docs': './docs/src/index.js',
'vant-preview': './docs/src/preview.js'
'vant-preview': './docs/src/preview.js',
},
output: {
path: path.join(__dirname, '../docs/dist'),
publicPath: '/',
chunkFilename: 'async_[name].js'
chunkFilename: 'async_[name].js',
},
stats: {
modules: false,
children: false
children: false,
},
serve: {
open: true,
host: '0.0.0.0',
devMiddleware: {
logLevel: 'warn'
logLevel: 'warn',
},
hotClient: {
logLevel: 'warn',
allEntries: true
}
allEntries: true,
},
},
resolve: {
extensions: ['.js', '.vue', '.css']
extensions: ['.js', '.vue', '.css'],
},
module: {
rules: [
@ -41,34 +41,26 @@ module.exports = {
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
]
preserveWhitespace: false,
},
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
use: 'babel-loader',
},
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
},
{
test: /\.md$/,
use: [
'vue-loader',
'@vant/markdown-loader'
]
}
]
use: ['vue-loader', '@vant/markdown-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
@ -77,13 +69,13 @@ module.exports = {
chunks: ['vant-docs'],
template: 'docs/src/index.tpl',
filename: 'index.html',
inject: true
inject: true,
}),
new HtmlWebpackPlugin({
chunks: ['vant-preview'],
template: 'docs/src/index.tpl',
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'),
publicPath: 'https://b.yzcdn.cn/vant-weapp/',
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)
`2020-04-21`
**Features**
@ -16,6 +16,7 @@
- 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)
`2020-04-12`
**Features**
@ -30,6 +31,7 @@
- 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)
`2020-04-04`
**Features**
@ -50,20 +52,21 @@
- 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)
`2020-03-21`
**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)
- Steps: 新增 click 事件 [\#2874](https://github.com/youzan/vant-weapp/pull/2874)
- SideBar: 新增 title 插槽 [\#2873](https://github.com/youzan/vant-weapp/pull/2873)
- 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: 更新样式、调整事件触发顺序与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: 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**
@ -71,6 +74,7 @@
- Button: 修复 disabled 属性对原生事件无效 [\#2878](https://github.com/youzan/vant-weapp/pull/2878)
### [v1.0.7](https://github.com/youzan/vant-weapp/tree/v1.0.7)
`2020-03-04`
**Features**
@ -84,19 +88,20 @@
- Tab: 修复内容项高度不同时粘性布局异常 [\#2817](https://github.com/youzan/vant-weapp/pull/2817)
- 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)
- Uploader: 修复文档错误 [\#2777](https://github.com/youzan/vant-weapp/pull/2777)
### [v1.0.6](https://github.com/youzan/vant-weapp/tree/v1.0.6)
`2020-02-24`
**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)
- 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**
@ -108,15 +113,16 @@
- 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)
`2020-02-07`
**Features**
- ActionSheet: actions 支持更多 openType [\#2715](https://github.com/youzan/vant-weapp/pull/2715)
- Uploader: 新增开始`disabled`时的组件样式 [\#2720](https://github.com/youzan/vant-weapp/pull/2720)
- Icon: 调整示例小程序页面与vant对齐 [\#2728](https://github.com/youzan/vant-weapp/pull/2728)
- 示例小程序首页与vant对齐 [\#2729](https://github.com/youzan/vant-weapp/pull/2729)
- 完善快速上手文档，增加npm构建说明 [\#2726](https://github.com/youzan/vant-weapp/pull/2726)
- Icon: 调整示例小程序页面与 vant 对齐 [\#2728](https://github.com/youzan/vant-weapp/pull/2728)
- 示例小程序首页与 vant 对齐 [\#2729](https://github.com/youzan/vant-weapp/pull/2729)
- 完善快速上手文档，增加 npm 构建说明 [\#2726](https://github.com/youzan/vant-weapp/pull/2726)
**Bug Fixes**
@ -127,6 +133,7 @@
- TreeSelect: 修正文档示例代码标签闭合错误 [\#2710](https://github.com/youzan/vant-weapp/pull/2710)
### [v1.0.4](https://github.com/youzan/vant-weapp/tree/v1.0.4)
`2020-01-21`
**Features**
@ -144,11 +151,12 @@
- 升级依赖版本以避免安全警告 [\#2680](https://github.com/youzan/vant-weapp/pull/2680)
### [v1.0.3](https://github.com/youzan/vant-weapp/tree/v1.0.3)
`2020-01-09`
**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)
**Bug Fixes**
@ -157,23 +165,26 @@
- NavBar: 修复返回图标未居中的问题 [\#2633](https://github.com/youzan/vant-weapp/pull/2633)
### [v1.0.2](https://github.com/youzan/vant-weapp/tree/v1.0.2)
`2019-12-31`
**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)
- 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**
- Tab: 优化弹性滚动效果 [\#2606](https://github.com/youzan/vant-weapp/pull/2606)
**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)
### [v1.0.1](https://github.com/youzan/vant-weapp/tree/v1.0.1)
`2019-12-23`
**Features**
@ -195,6 +206,7 @@
- Uploader: 修复 capture 属性不生效 [\#2551](https://github.com/youzan/vant-weapp/pull/2551)
### [v1.0.0](https://github.com/youzan/vant-weapp/tree/v1.0.0)
`2019-12-11`
#### 主要变动
@ -203,7 +215,7 @@
- 增加十一个新组件
- 增加数十个 API
- 所有组件支持通过`CSS自定义属性`自定义样式
- 使用`env()`重构iOS安全区域适配
- 使用`env()`重构 iOS 安全区域适配
- 调整部分 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)
@ -263,7 +275,7 @@
- 去除`transitionend`事件，新增 6 个事件
----
---
#### 新特性
@ -404,7 +416,7 @@
- 新增`input-width`属性
- 新增`button-size`属性
- 新增`decimalLength`属性
- 新增 disablePlus、disableMinus属性
- 新增 disablePlus、disableMinus 属性
##### Steps

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

@ -35,8 +35,8 @@ Vant Weapp 的所有组件都开启了`addGlobalClass: true`以接受外部样
```js
Component({
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://job.youzan.com)
* [更新日志](#/changelog)
* [Vue 组件库](https://github.com/youzan/vant)
* [React 组件库](https://www.youzanyun.com/zanui/zent)
- [意见反馈](https://github.com/youzan/vant-weapp/issues)
- [加入我们](https://job.youzan.com)
- [更新日志](#/changelog)
- [Vue 组件库](https://github.com/youzan/vant)
- [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 中的 `"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) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
Css变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
### 样式变量
@ -52,7 +52,7 @@ Page({
buttonStyle: `
--button-border-radius: 10px;
--button-default-color: green;
`
`,
},
onLoad() {
@ -61,16 +61,16 @@ Page({
buttonStyle: `
--button-border-radius: 2px;
--button-default-color: pink;
`
`,
});
}, 2000);
}
},
});
```
### 定制多个组件的主题样式
> 与单个组件的定制方式类似，只需用一个container节点包裹住需要定制的组件，并将 Css变量 设置在container节点上
> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 Css 变量 设置在 container 节点上
```html
<view class="container">
@ -88,7 +88,7 @@ import Toast from 'path/to/vant-weapp/dist/toast/toast';
Page({
onClick() {
Toast('我是提示文案，建议不超过十五字~');
}
},
});
```
@ -103,7 +103,7 @@ Page({
### 定制全局主题样式
> 在 app.wxss 中，写入 Css变量，即可对全局生效
> 在 app.wxss 中，写入 Css 变量，即可对全局生效
```less
page {
@ -113,4 +113,3 @@ page {
--toast-background-color: pink;
}
```

23
docs/src/App.vue
View File

@ -15,19 +15,13 @@
import pkgJson from '../../package.json';
import docConfig, { github, versions } from './doc.config';
const UNSHARED = [
'common',
'quickstart',
'changelog',
'intro',
'transition'
];
const UNSHARED = ['common', 'quickstart', 'changelog', 'intro', 'transition'];
export default {
data() {
return {
github,
versions
versions,
};
},
@ -40,7 +34,10 @@ export default {
let prefix = '';
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';
}
@ -49,7 +46,7 @@ export default {
}
return `./preview.html#${path}`;
}
},
},
methods: {
@ -57,15 +54,15 @@ export default {
if (version !== pkgJson.version) {
location.href = `https://youzan.github.io/vant-weapp/${version}`;
}
}
}
},
},
};
</script>
<style lang="less">
.van-doc-intro {
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;
&__logo {

6
docs/src/Preview.vue
View File

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

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

@ -12,20 +12,20 @@ export default {
logo: {
image: 'https://img.yzcdn.cn/vant/logo.png',
title: 'Vant Weapp',
href: '#/'
href: '#/',
},
nav: {
logoLink: [
{
image: 'https://img.yzcdn.cn/vant/vant-o.svg',
url: '/vant'
url: '/vant',
},
{
image: 'https://img.yzcdn.cn/vant/logo/github.svg',
url: github
}
]
}
url: github,
},
],
},
},
nav: [
{
@ -36,39 +36,39 @@ export default {
{
path: '/intro',
title: '介绍',
md: true
md: true,
},
{
path: '/quickstart',
title: '快速上手',
md: true
md: true,
},
{
path: '/changelog',
title: '更新日志',
md: true
md: true,
},
{
path: '/common',
title: '内置样式'
title: '内置样式',
},
{
path: '/custom-style',
title: '样式覆盖',
md: true
md: true,
},
{
path: '/theme',
title: '定制主题',
md: true
}
]
}
]
md: true,
},
],
},
],
},
{
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 };
}
},
});
const ua = navigator.userAgent.toLowerCase();
@ -44,12 +44,12 @@ new Vue({
const el = document.querySelector(this.$route.hash);
if (el) {
el.scrollIntoView({
behavior: 'smooth'
behavior: 'smooth',
});
}
}
}, 1000);
},
render: h => h(App),
router
render: (h) => h(App),
router,
});

2
docs/src/preview.js
View File

@ -5,5 +5,5 @@ Vue.config.productionTip = false;
new Vue({
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 = [
{
path: '*',
redirect: to => `/intro`
}
redirect: () => `/intro`,
},
];
const navs = docConfig.nav || [];
navs.forEach(nav => {
if (nav.groups) {
nav.groups.forEach(group => {
group.list.forEach(page => addRoute(page));
});
} else {
addRoute(nav);
}
});
function addRoute(page, isComponent) {
function addRoute(page) {
let { path } = page;
if (path) {
path = path.replace('/', '');
@ -40,12 +30,22 @@ const registerRoute = () => {
path: `/${path}`,
meta: {
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;
};

2
package.json
View File

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

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

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

57
packages/area/README.md
View File

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

41
packages/area/index.ts
View File

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

68
packages/button/README.md
View File

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

18
packages/button/index.ts
View File

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

114
packages/calendar/README.md
View File

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

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

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

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

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

67
packages/calendar/index.ts
View File

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

66
packages/card/README.md
View File

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

16
packages/card/index.ts
View File

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

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

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

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

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

74
packages/cell/README.md
View File

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

2
packages/cell/index.json
View File

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

2
packages/cell/index.less
View File

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

10
packages/cell/index.ts
View File

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

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

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

100
packages/checkbox/README.md
View File

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

22
packages/checkbox/index.ts
View File

@ -1,6 +1,9 @@
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('change', value);
}
@ -25,16 +28,16 @@ VantComponent({
labelDisabled: Boolean,
shape: {
type: String,
value: 'round'
value: 'round',
},
iconSize: {
type: null,
value: 20
}
value: 20,
},
},
data: {
parentDisabled: false
parentDisabled: false,
},
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 { name } = this.data;
const { max } = parent.data;
@ -81,6 +87,6 @@ VantComponent({
emit(parent, parentValue);
}
}
}
}
},
},
});

36
packages/circle/README.md
View File

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

28
packages/circle/index.ts
View File

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

21
packages/col/README.md
View File

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

8
packages/col/index.less
View File

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

12
packages/col/index.ts
View File

@ -9,21 +9,23 @@ VantComponent({
props: {
span: Number,
offset: Number
offset: Number,
},
data: {
viewStyle: ''
viewStyle: '',
},
methods: {
setGutter(gutter: number) {
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) {
this.setData({ viewStyle });
}
}
}
},
},
});

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

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

83
packages/collapse/README.md
View File

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

16
packages/collapse/index.ts
View File

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

14
packages/common/README.md
View File

@ -9,7 +9,7 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
在 app.wxss 中引入内置样式
```css
@import "@vant/weapp/common/index.wxss";
@import '@vant/weapp/common/index.wxss';
```
## 代码演示
@ -19,13 +19,19 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
```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 边框

17
packages/common/component.ts
View File

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

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

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

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

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

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

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

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

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

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

@ -47,57 +47,57 @@ VantComponent({
...pickerProps,
value: {
type: null,
observer: 'updateValue'
observer: 'updateValue',
},
filter: null,
type: {
type: String,
value: 'datetime',
observer: 'updateValue'
observer: 'updateValue',
},
showToolbar: {
type: Boolean,
value: true
value: true,
},
formatter: {
type: null,
value: defaultFormatter
value: defaultFormatter,
},
minDate: {
type: Number,
value: new Date(currentYear - 10, 0, 1).getTime(),
observer: 'updateValue'
observer: 'updateValue',
},
maxDate: {
type: Number,
value: new Date(currentYear + 10, 11, 31).getTime(),
observer: 'updateValue'
observer: 'updateValue',
},
minHour: {
type: Number,
value: 0,
observer: 'updateValue'
observer: 'updateValue',
},
maxHour: {
type: Number,
value: 23,
observer: 'updateValue'
observer: 'updateValue',
},
minMinute: {
type: Number,
value: 0,
observer: 'updateValue'
observer: 'updateValue',
},
maxMinute: {
type: Number,
value: 59,
observer: 'updateValue'
}
observer: 'updateValue',
},
},
data: {
innerValue: Date.now(),
columns: []
columns: [],
},
methods: {
@ -129,8 +129,8 @@ VantComponent({
updateColumns() {
const { formatter = defaultFormatter } = this.data;
const results = this.getOriginColumns().map(column => ({
values: column.values.map(value => formatter(column.type, value))
const results = this.getOriginColumns().map((column) => ({
values: column.values.map((value) => formatter(column.type, value)),
}));
return this.set({ columns: results });
@ -139,7 +139,7 @@ VantComponent({
getOriginColumns() {
const { filter } = this.data;
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;
value = type === 'year' ? `${value}` : padZero(value);
return value;
@ -161,12 +161,12 @@ VantComponent({
return [
{
type: 'hour',
range: [data.minHour, data.maxHour]
range: [data.minHour, data.maxHour],
},
{
type: 'minute',
range: [data.minMinute, data.maxMinute]
}
range: [data.minMinute, data.maxMinute],
},
];
}
@ -175,37 +175,37 @@ VantComponent({
maxDate,
maxMonth,
maxHour,
maxMinute
maxMinute,
} = this.getBoundary('max', data.innerValue);
const {
minYear,
minDate,
minMonth,
minHour,
minMinute
minMinute,
} = this.getBoundary('min', data.innerValue);
const result = [
{
type: 'year',
range: [minYear, maxYear]
range: [minYear, maxYear],
},
{
type: 'month',
range: [minMonth, maxMonth]
range: [minMonth, maxMonth],
},
{
type: 'day',
range: [minDate, maxDate]
range: [minDate, maxDate],
},
{
type: 'hour',
range: [minHour, maxHour]
range: [minHour, maxHour],
},
{
type: 'minute',
range: [minMinute, maxMinute]
}
range: [minMinute, maxMinute],
},
];
if (data.type === 'date') result.splice(3, 2);
@ -274,7 +274,7 @@ VantComponent({
[`${type}Month`]: month,
[`${type}Date`]: date,
[`${type}Hour`]: hour,
[`${type}Minute`]: minute
[`${type}Minute`]: minute,
};
},
@ -294,7 +294,8 @@ VantComponent({
if (data.type === 'time') {
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 {
const values = picker.getValues();
const year = getTrueValue(values[0]);
@ -328,15 +329,12 @@ VantComponent({
if (type === 'time') {
const pair = value.split(':');
values = [
formatter('hour', pair[0]),
formatter('minute', pair[1])
];
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
} else {
const date = new Date(value);
values = [
formatter('year', `${date.getFullYear()}`),
formatter('month', padZero(date.getMonth() + 1))
formatter('month', padZero(date.getMonth() + 1)),
];
if (type === 'date') {
values.push(formatter('day', padZero(date.getDate())));
@ -353,7 +351,7 @@ VantComponent({
return this.set({ innerValue: value })
.then(() => this.updateColumns())
.then(() => picker.setValues(values));
}
},
},
created() {
@ -361,5 +359,5 @@ VantComponent({
this.updateColumnValue(innerValue).then(() => {
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 };
export type CombinedComponentInstance<
Data,
Props,
Methods
> = Methods &
export type CombinedComponentInstance<Data, Props, Methods> = Methods &
WechatMiniprogram.Component.TrivialInstance &
Weapp.FormField &
{
Weapp.FormField & {
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({
title: '标题',
message: '弹窗内容'
message: '弹窗内容',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容'
message: '弹窗内容',
}).then(() => {
// on close
});
@ -50,12 +50,14 @@ Dialog.alert({
```javascript
Dialog.confirm({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
```
### 异步关闭
@ -99,7 +101,7 @@ Dialog.confirm({
```js
Page({
data: {
show: true
show: true,
},
getUserInfo(event) {
@ -108,7 +110,7 @@ Page({
onClose() {
this.setData({ close: false });
}
},
});
```
@ -117,7 +119,7 @@ Page({
### 方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| --- | --- | --- | --- |
| Dialog | `options` | `Promise` | 展示弹窗 |
| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 |
@ -131,90 +133,90 @@ Page({
通过函数调用 Dialog 时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | *string* | - | - |
| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | *string* | - | 1.0.0 |
| messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
| zIndex | z-index 层级 | *number* | `100` | - |
| className | 自定义类名，dialog在自定义组件内时无效 | *string* | '' | - |
| customStyle | 自定义样式 | *string* | '' | - |
| selector | 自定义选择器 | *string* | `van-dialog` | - |
| showConfirmButton | 是否展示确认按钮 | *boolean* | `true` | - |
| showCancelButton | 是否展示取消按钮 | *boolean* | `false` | - |
| confirmButtonText | 确认按钮的文案 | *string* | `确认` | - |
| cancelButtonText | 取消按钮的文案 | *string* | `取消` | - |
| overlay | 是否展示遮罩层 | *boolean* | `true` | - |
| overlayStyle | 自定义遮罩层样式 | *object* | - | 1.0.0 |
| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - |
| asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` | - |
| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 | - |
| transition | 动画名称，可选值为`fade` `none` | *string* | `scale` | - |
| confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - | - |
| --- | --- | --- | --- | --- |
| title | 标题 | _string_ | - | - |
| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | _string_ | - | 1.0.0 |
| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | - |
| zIndex | z-index 层级 | _number_ | `100` | - |
| className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | - |
| customStyle | 自定义样式 | _string_ | '' | - |
| selector | 自定义选择器 | _string_ | `van-dialog` | - |
| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | - |
| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | - |
| confirmButtonText | 确认按钮的文案 | _string_ | `确认` | - |
| cancelButtonText | 取消按钮的文案 | _string_ | `取消` | - |
| overlay | 是否展示遮罩层 | _boolean_ | `true` | - |
| overlayStyle | 自定义遮罩层样式 | _object_ | - | 1.0.0 |
| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | - |
| asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | _boolean_ | `false` | - |
| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | - |
| transition | 动画名称，可选值为`fade` `none` | _string_ | `scale` | - |
| confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
### OpenType Options
使用`confirmButtonOpenType`后，支持以下选项：
| 参数 | 说明 | 类型 | 默认值 | open-type |
|-----------|-----------|-----------|-------------|-------------|
| appParameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | `getUserInfo` |
| sessionFrom | 会话来源 | *string* | - | `contact` |
| businessId | 客服消息子商户 id | *number* | - | `contact` |
| sendMessageTitle | 会话内消息卡片标题 | *string* | 当前标题 | `contact` |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | `contact` |
| sendMessageImg | sendMessageImg | *string* | 截图 | `contact` |
| showMessageCard | 显示会话内消息卡片 | *string* | `false` | `contact` |
| --- | --- | --- | --- | --- |
| appParameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
| sessionFrom | 会话来源 | _string_ | - | `contact` |
| businessId | 客服消息子商户 id | _number_ | - | `contact` |
| sendMessageTitle | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` |
| sendMessageImg | sendMessageImg | _string_ | 截图 | `contact` |
| showMessageCard | 显示会话内消息卡片 | _string_ | `false` | `contact` |
### Props
通过组件调用 Dialog 时，支持以下 Props:
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| show | 是否显示弹窗 | *boolean* | - |
| title | 标题 | *string* | - |
| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | *string* | - |
| message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` |
| z-index | z-index 层级 | *number* | `100` |
| class-name | 自定义类名，dialog在自定义组件内时无效 | *string* | '' |
| custom-style | 自定义样式 | *string* | '' |
| show-confirm-button | 是否展示确认按钮 | *boolean* | `true` |
| show-cancel-button | 是否展示取消按钮 | *boolean* | `false` |
| confirm-button-text | 确认按钮的文案 | *string* | `确认` |
| cancel-button-text | 取消按钮的文案 | *string* | `取消` |
| confirm-button-color | 确认按钮的字体颜色 | *string* | `#1989fa` |
| cancel-button-color | 取消按钮的字体颜色 | *string* | `#333` |
| overlay | 是否展示遮罩层 | *boolean* | `true` |
| overlay-style | 自定义遮罩层样式 | *object* | - | 1.0.0 |
| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` |
| use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` |
| use-title-slot | 是否使用自定义标题的插槽 | *boolean* | `false` |
| async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` |
| transition | 动画名称，可选值为`fade` | *string* | `scale` |
| confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | *string* | - |
| --- | --- | --- | --- |
| show | 是否显示弹窗 | _boolean_ | - |
| title | 标题 | _string_ | - |
| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 |
| message | 文本内容，支持通过`\n`换行 | _string_ | - |
| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| z-index | z-index 层级 | _number_ | `100` |
| class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' |
| custom-style | 自定义样式 | _string_ | '' |
| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
| confirm-button-text | 确认按钮的文案 | _string_ | `确认` |
| cancel-button-text | 取消按钮的文案 | _string_ | `取消` |
| confirm-button-color | 确认按钮的字体颜色 | _string_ | `#1989fa` |
| cancel-button-color | 取消按钮的字体颜色 | _string_ | `#333` |
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlay-style | 自定义遮罩层样式 | _object_ | - | 1.0.0 |
| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` |
| use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` |
| use-title-slot | 是否使用自定义标题的插槽 | _boolean_ | `false` |
| async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | _boolean_ | `false` |
| transition | 动画名称，可选值为`fade` | _string_ | `scale` |
| confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - |
### OpenType Props
使用`confirm-button-open-type`后，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 | open-type |
|-----------|-----------|-----------|-------------|-------------|
| app-parameter | 打开 APP 时，向 APP 传递的参数 | *string* | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | *string* | `en` | `getUserInfo` |
| session-from | 会话来源 | *string* | - | `contact` |
| business-id | 客服消息子商户 id | *number* | - | `contact` |
| send-message-title | 会话内消息卡片标题 | *string* | 当前标题 | `contact` |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | *string* | 当前分享路径 | `contact` |
| send-message-img | sendMessageImg | *string* | 截图 | `contact` |
| show-message-card | 显示会话内消息卡片 | *string* | `false` | `contact` |
| --- | --- | --- | --- | --- |
| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` |
| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` |
| session-from | 会话来源 | _string_ | - | `contact` |
| business-id | 客服消息子商户 id | _number_ | - | `contact` |
| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` |
| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` |
| send-message-img | sendMessageImg | _string_ | 截图 | `contact` |
| show-message-card | 显示会话内消息卡片 | _string_ | `false` | `contact` |
### Events
| 事件 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| --- | --- | --- |
| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
| bind:confirm | 点击确认按钮时触发 | - |
| bind:cancel | 点击取消按钮时触发 | - |
@ -226,6 +228,6 @@ Page({
### Slot
| 名称 | 说明 |
|-----------|-----------|
| 名称 | 说明 |
| ----- | ---------------------------------------------------- |
| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |

28
packages/dialog/dialog.ts
View File

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

40
packages/dialog/index.ts
View File

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

30
packages/divider/README.md
View File

@ -24,7 +24,7 @@
<van-divider />
```
### 使用hairline
### 使用 hairline
```html
<van-divider hairline />
@ -40,22 +40,28 @@
```html
<van-divider contentPosition="center">文本</van-divider>
<van-divider contentPosition="left">文本</van-divider>
<van-divider contentPosition="right">文本</van-divider>
<van-divider contentPosition="left">文本</van-divider>
<van-divider contentPosition="right">文本</van-divider>
```
### 自定义属性
```html
<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>
```
### 自定义样式
```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
@ -63,14 +69,14 @@
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| dashed | 虚线 | *boolean* | false | - |
| hairline | 细线 | *boolean* | false | - |
| content-position | 文本位置，`left` `center` `right` | *string* | - | - |
| custom-style | 自定义样式 | *string* | - | - |
| --- | --- | --- | --- | --- |
| dashed | 虚线 | _boolean_ | false | - |
| hairline | 细线 | _boolean_ | false | - |
| content-position | 文本位置，`left` `center` `right` | _string_ | - | - |
| custom-style | 自定义样式 | _string_ | - | - |
### Slot
| 名称 | 说明 |
|-----------|-----------|
| 名称 | 说明 |
| ---- | -------------- |
| 默认 | 自定义文本内容 |

2
packages/divider/index.json
View File

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

2
packages/divider/index.less
View File

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

18
packages/divider/index.ts
View File

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

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

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

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

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

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

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

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

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

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

@ -17,46 +17,46 @@ VantComponent({
},
unlinked() {
this.updateItemListData();
}
},
},
props: {
activeColor: {
type: String,
observer: 'updateChildrenData'
observer: 'updateChildrenData',
},
overlay: {
type: Boolean,
value: true,
observer: 'updateChildrenData'
observer: 'updateChildrenData',
},
zIndex: {
type: Number,
value: 10
value: 10,
},
duration: {
type: Number,
value: 200,
observer: 'updateChildrenData'
observer: 'updateChildrenData',
},
direction: {
type: String,
value: 'down',
observer: 'updateChildrenData'
observer: 'updateChildrenData',
},
closeOnClickOverlay: {
type: Boolean,
value: true,
observer: 'updateChildrenData'
observer: 'updateChildrenData',
},
closeOnClickOutside: {
type: Boolean,
value: true
}
value: true,
},
},
data: {
itemListData: []
itemListData: [],
},
beforeCreate() {
@ -66,13 +66,13 @@ VantComponent({
},
destroyed() {
ARRAY = ARRAY.filter(item => item !== this);
ARRAY = ARRAY.filter((item) => item !== this);
},
methods: {
updateItemListData() {
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(
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
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};`;
@ -125,7 +126,7 @@ VantComponent({
const child = this.children[index];
if (!child.data.disabled) {
ARRAY.forEach(menuItem => {
ARRAY.forEach((menuItem) => {
if (
menuItem &&
menuItem.data.closeOnClickOutside &&
@ -137,6 +138,6 @@ VantComponent({
this.toggleItem(index);
}
}
}
},
},
});

113
packages/field/README.md
View File

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

2
packages/field/index.json
View File

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

18
packages/field/index.ts
View File

@ -22,13 +22,13 @@ VantComponent({
autosize: [Boolean, Object],
readonly: {
type: Boolean,
observer: 'setShowClear'
observer: 'setShowClear',
},
required: Boolean,
iconClass: String,
clearable: {
type: Boolean,
observer: 'setShowClear'
observer: 'setShowClear',
},
clickable: Boolean,
inputAlign: String,
@ -39,18 +39,18 @@ VantComponent({
errorMessageAlign: String,
border: {
type: Boolean,
value: true
value: true,
},
titleWidth: {
type: String,
value: '90px'
}
value: '90px',
},
},
data: {
focused: false,
innerValue: '',
showClear: false
showClear: false,
},
created() {
@ -133,10 +133,10 @@ VantComponent({
const { clearable, readonly } = this.data;
const { focused, value } = this;
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.value = value;
}
}
},
},
placeholder: String,
placeholderStyle: String,
@ -14,41 +14,41 @@ export const commonProps = {
disabled: Boolean,
maxlength: {
type: Number,
value: -1
value: -1,
},
cursorSpacing: {
type: Number,
value: 50
value: 50,
},
autoFocus: Boolean,
focus: Boolean,
cursor: {
type: Number,
value: -1
value: -1,
},
selectionStart: {
type: Number,
value: -1
value: -1,
},
selectionEnd: {
type: Number,
value: -1
value: -1,
},
adjustPosition: {
type: Boolean,
value: true
value: true,
},
holdKeyboard: Boolean
holdKeyboard: Boolean,
};
export const inputProps = {
type: {
type: String,
value: 'text'
value: 'text',
},
password: Boolean,
confirmType: String,
confirmHold: Boolean
confirmHold: Boolean,
};
export const textareaProps = {
@ -56,10 +56,10 @@ export const textareaProps = {
fixed: Boolean,
showConfirmBar: {
type: Boolean,
value: true
value: true,
},
disableDefaultPadding: {
type: Boolean,
value: true
value: true,
},
};

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

@ -19,8 +19,8 @@ VantComponent({
plain: Boolean,
type: {
type: String,
value: 'danger'
}
value: 'danger',
},
},
mounted() {
@ -39,8 +39,8 @@ VantComponent({
const index = children.indexOf(this);
this.setData({
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,
icon: String,
disabled: Boolean,
loading: Boolean
loading: Boolean,
},
methods: {
onClick(event: Weapp.Event) {
this.$emit('click', event.detail);
this.jumpLink();
}
}
},
},
});

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

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

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

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

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

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

58
packages/grid/README.md
View File

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

20
packages/grid/index.ts
View File

@ -11,32 +11,32 @@ VantComponent({
props: {
square: {
type: Boolean,
observer: 'updateChildren'
observer: 'updateChildren',
},
gutter: {
type: [Number, String],
value: 0,
observer: 'updateChildren'
observer: 'updateChildren',
},
clickable: {
type: Boolean,
observer: 'updateChildren'
observer: 'updateChildren',
},
columnNum: {
type: Number,
value: 4,
observer: 'updateChildren'
observer: 'updateChildren',
},
center: {
type: Boolean,
value: true,
observer: 'updateChildren'
observer: 'updateChildren',
},
border: {
type: Boolean,
value: true,
observer: 'updateChildren'
}
observer: 'updateChildren',
},
},
data: {
@ -47,7 +47,7 @@ VantComponent({
const { gutter } = this.data;
if (gutter) {
this.setData({
viewStyle: `padding-left: ${addUnit(gutter)}`
viewStyle: `padding-left: ${addUnit(gutter)}`,
});
}
},
@ -59,6 +59,6 @@ VantComponent({
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 是什么情况？
这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](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
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| name | 图标名称或图片链接 | *string* | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - |
| info | 图标右上角文字提示 | *string \| number* | - | - |
| color | 图标颜色 | *string* | `inherit` | - |
| size | 图标大小，如 `20px`，`2em`，默认单位为`px` | *string \| number* | `inherit` | - |
| custom-style | 自定义样式 | *string* | - | - |
| class-prefix | 类名前缀 | *string* | `van-icon` | - |
| --- | --- | --- | --- | --- |
| name | 图标名称或图片链接 | _string_ | - | - |
| dot | 是否显示图标右上角小红点 | _boolean_ | `false` | - |
| info | 图标右上角文字提示 | _string \| number_ | - | - |
| color | 图标颜色 | _string_ | `inherit` | - |
| size | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit` | - |
| custom-style | 自定义样式 | _string_ | - | - |
| class-prefix | 类名前缀 | _string_ | `van-icon` | - |
### Events
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| bind:click | 点击图标时触发 | - |
| 事件名 | 说明 | 参数 |
| ---------- | -------------- | ---- |
| bind:click | 点击图标时触发 | - |
### 外部样式类
| 类名 | 说明 |
|-----------|-----------|
| 类名 | 说明 |
| ------------ | ------------ |
| custom-class | 根节点样式类 |

12
packages/icon/index.ts
View File

@ -9,21 +9,21 @@ VantComponent({
customStyle: String,
classPrefix: {
type: String,
value: 'van-icon'
value: 'van-icon',
},
name: {
type: String,
observer(val) {
this.setData({
isImageName: val.indexOf('/') !== -1
isImageName: val.indexOf('/') !== -1,
});
}
}
},
},
},
methods: {
onClick() {
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
<van-image
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
```
### 填充模式
@ -75,12 +71,7 @@
```html
<van-image use-loading-slot>
<van-loading
slot="loading"
type="spinner"
size="20"
vertical
/>
<van-loading slot="loading" type="spinner" size="20" vertical />
</van-image>
```
@ -99,52 +90,52 @@
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| src | 图片链接 | *string* | - | - |
| fit | 图片填充模式 | *string* | *fill* | - |
| alt | 替代文本 | *string* | - | - |
| width | 宽度，默认单位为`px` | *string \| number* | - | - |
| height | 高度，默认单位为`px` | *string \| number* | - | - |
| radius | 圆角大小，默认单位为`px` | *string \| number* | `0` | - |
| round | 是否显示为圆形 | *boolean* | `false` | - |
| lazy-load | 是否懒加载 | *boolean* | `false` | - |
| show-error | 是否展示图片加载失败提示 | *boolean* | `true` | - |
| show-loading | 是否展示图片加载中提示 | *boolean* | `true` | - |
| use-error-slot | 是否使用 error 插槽 | *boolean* | `false` | - |
| use-loading-slot | 是否使用 loading 插槽 | *boolean* | `false` | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | *boolean* | `false` | - |
| --- | --- | --- | --- | --- |
| src | 图片链接 | _string_ | - | - |
| fit | 图片填充模式 | _string_ | _fill_ | - |
| alt | 替代文本 | _string_ | - | - |
| width | 宽度，默认单位为`px` | _string \| number_ | - | - |
| height | 高度，默认单位为`px` | _string \| number_ | - | - |
| radius | 圆角大小，默认单位为`px` | _string \| number_ | `0` | - |
| round | 是否显示为圆形 | _boolean_ | `false` | - |
| lazy-load | 是否懒加载 | _boolean_ | `false` | - |
| show-error | 是否展示图片加载失败提示 | _boolean_ | `true` | - |
| show-loading | 是否展示图片加载中提示 | _boolean_ | `true` | - |
| use-error-slot | 是否使用 error 插槽 | _boolean_ | `false` | - |
| use-loading-slot | 是否使用 loading 插槽 | _boolean_ | `false` | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | _boolean_ | `false` | - |
### 图片填充模式
### 图片填充模式 
| 名称 | 含义 |
|------|------|
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
| fill | 拉伸图片，使图片填满元素 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| none | 保持图片原有尺寸 |
| 名称 | 含义 |
| --------- | ------------------------------------------------------ |
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
| fill | 拉伸图片，使图片填满元素 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| none | 保持图片原有尺寸 |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击图片时触发 | event: Event |
| load | 图片加载完毕时触发 | event: Event |
| error | 图片加载失败时触发 | event: Event |
| 事件名 | 说明 | 回调参数 |
| ------ | ------------------ | ------------ |
| click | 点击图片时触发 | event: Event |
| load | 图片加载完毕时触发 | event: Event |
| error | 图片加载失败时触发 | event: Event |
### Slots
| 名称 | 说明 |
|------|------|
| loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 |
| 名称 | 说明 |
| ------- | -------------------------- |
| loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 |
### 外部样式类
| 类名 | 说明 |
|-----------|-----------|
| custom-class | 根节点样式类 |
| image-class | 图片样式类 |
| loading-class | loading样式类 |
| error-class | error样式类 |
| 类名 | 说明 |
| ------------- | -------------- |
| custom-class | 根节点样式类 |
| image-class | 图片样式类 |
| loading-class | loading 样式类 |
| error-class | error 样式类 |

26
packages/image/index.ts
View File

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

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

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

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

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

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

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

4
packages/info/index.ts
View File

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

28
packages/loading/README.md
View File

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

2
packages/loading/index.json
View File

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

4
packages/loading/index.ts
View File

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

13
packages/mixins/basic.ts
View File

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

4
packages/mixins/button.ts
View File

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

8
packages/mixins/link.ts
View File

@ -3,8 +3,8 @@ export const link = Behavior({
url: String,
linkType: {
type: String,
value: 'navigateTo'
}
value: 'navigateTo',
},
},
methods: {
@ -13,6 +13,6 @@ export const link = Behavior({
if (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({
properties: {
openType: String
openType: String,
},
methods: {
@ -29,5 +29,5 @@ export const openType = Behavior({
bindOpenSetting(event: Partial<Weapp.Event>) {
this.$emit('opensetting', event.detail);
},
}
},
});

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

@ -36,7 +36,7 @@ export const pageScrollMixin = (scroller: Scroller) =>
detached() {
const page = getCurrentPage();
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.offsetX = Math.abs(this.deltaX);
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-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-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({
properties: {
customStyle: String,
@ -17,24 +17,24 @@ export const transition = function(showDefaultValue: boolean) {
show: {
type: Boolean,
value: showDefaultValue,
observer: 'observeShow'
observer: 'observeShow',
},
// @ts-ignore
duration: {
type: null,
value: 300,
observer: 'observeDuration'
observer: 'observeDuration',
},
name: {
type: String,
value: 'fade'
}
value: 'fade',
},
},
data: {
type: '',
inited: false,
display: false
display: false,
},
methods: {
@ -63,7 +63,7 @@ export const transition = function(showDefaultValue: boolean) {
inited: true,
display: true,
classes: classNames.enter,
currentDuration
currentDuration,
});
})
.then(nextTick)
@ -72,7 +72,7 @@ export const transition = function(showDefaultValue: boolean) {
this.transitionEnded = false;
this.setData({
classes: classNames['enter-to']
classes: classNames['enter-to'],
});
})
.catch(() => {});
@ -98,7 +98,7 @@ export const transition = function(showDefaultValue: boolean) {
this.setData({
classes: classNames.leave,
currentDuration
currentDuration,
});
})
.then(nextTick)
@ -108,7 +108,7 @@ export const transition = function(showDefaultValue: boolean) {
setTimeout(() => this.onTransitionEnd(), currentDuration);
this.setData({
classes: classNames['leave-to']
classes: classNames['leave-to'],
});
})
.catch(() => {});
@ -132,7 +132,7 @@ export const transition = function(showDefaultValue: boolean) {
if (!show && display) {
this.setData({ display: false });
}
}
}
},
},
});
};

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

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

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

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

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

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

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