-
构建项目 npm init -y
在cmd终端里面 输入 npm i @vant/weapp -S --production。将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
-
Popup 弹出层
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。在app.json或index.json中引入组件
| 参数 | 说明 | 类型 | 默认值 |
|---|
| show | 是否显示弹出层 | boolean | false |
| z-index | z-index 层级 | number | 100 |
| overlay | 是否显示遮罩层 | boolean | true |
| position | 弹出位置，可选值为 top bottom right left | string | center |
| duration | 动画时长，单位为毫秒 | *number | object* | 300 |
| round | 是否显示圆角 | boolean | false |
| custom-style | 自定义弹出层样式 | string | '' |
| overlay-style | 自定义遮罩层样式 | string | '' |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | true |
| closeable | 是否显示关闭图标 | boolean | false |
| close-icon | 关闭图标名称或图片链接 | string | cross |
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | boolean | false |
lock-scroll v1.7.3 | 是否锁定背景滚动 | boolean | true |
| 事件名 | 说明 | 参数 |
|---|
| bind:close | 关闭弹出层时触发 | - |
| bind:click-overlay | 点击遮罩层时触发 | - |
| bind:before-enter | 进入前触发 | - |
| bind:enter | 进入中触发 | - |
| bind:after-enter | 进入后触发 | - |
| bind:before-leave | 离开前触发 | - |
| bind:leave | 离开中触发 | - |
| bind:after-leave | 离开后触发 | - |
- Calendar 日历
日历组件用于选择日期或日期区间。
参数 | 说明 | 类型 | 默认值 |
| --------------------- | ----------------------------------------------------------- | -------------------------- | --------- |
| type | 选择类型:
single表示选择单个日期， multiple表示选择多个日期， range表示选择日期区间 | string | single |
| title | 日历标题 | string | 日期选择 |
| color | 主题色，对底部按钮和选中日期生效 | string | #ee0a24 |
| min-date | 可选择的最小日期 | timestamp | 当前日期 |
| max-date | 可选择的最大日期 | timestamp | 当前日期的六个月后 |
| default-date | 默认选中的日期，type为multiple或range时为数组 | timestamp | timestamp[] | 今天 |
| 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 | 确定 |
| first-day-of-week | 设置周起始日 | 0~6 | 0 |
| readonly v1.9.1 | 是否为只读状态，只读状态下不能选择日期 | boolean | false
当 Calendar 的 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 |
当 Calendar 的 type 为 range 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
|---|
| max-range | 日期区间最多可选天数，默认无限制 | *number | string* | - |
| range-prompt | 范围选择超过最多可选天数时的提示文案 | *string | null* | 选择天数不能超过 xx 天 |
| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | boolean | true |
| allow-same-day | 是否允许日期范围的起止时间为同一天 | boolean | false |
日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。
| 键名 | 说明 | 类型 |
|---|
| date | 日期对应的 Date 对象 | Date |
| type | 日期类型，可选值为selected、start、middle、end、disabled | string |
| text | 中间显示的文字 | string |
| topInfo | 上方的提示信息 | string |
| bottomInfo | 下方的提示信息 | string |
| className | 自定义 className | string |
| 事件名 | 说明 | 回调参数 |
|---|
| select | 点击任意日期时触发 | *value: Date | Date[]* |
| unselect | 当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发 | value: Date |
| confirm | 日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发 | *value: Date | Date[]* |
| open | 打开弹出层时触发 | - |
| close | 关闭弹出层时触发 | - |
| opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - |
| over-range | 范围选择超过最多可选天数时触发 | - |
click-subtitle v1.8.1 | 点击日历副标题时触发 | WechatMiniprogram.TouchEvent |
| 名称 | 说明 |
|---|
| title | 自定义标题 |
| footer | 自定义底部区域内容 |
