在cmd终端里面 输入 npm i @vant/weapp -S --production。将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。在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* |
| 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 | 离开后触发 | - |
日历组件用于选择日期或日期区间。
| 参数 | 说明 | 类型 | 默认值 |
|---|
| 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* |
| 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* |
| 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 |
| unselect | 当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发 | value: Date |
| confirm | 日期选择完成后触发,若show-confirm为true,则点击确认按钮后触发 | *value: Date |
| open | 打开弹出层时触发 | - |
| close | 关闭弹出层时触发 | - |
| opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - |
| over-range | 范围选择超过最多可选天数时触发 | - |
click-subtitle v1.8.1 | 点击日历副标题时触发 | WechatMiniprogram.TouchEvent |
| 名称 | 说明 |
|---|
| title | 自定义标题 |
| footer | 自定义底部区域内容 |