npm构建Vant小程序

374 阅读4分钟
  • 构建项目 npm init -y

在cmd终端里面 输入 npm i @vant/weapp -S --production。将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

  • Popup 弹出层

弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。在app.jsonindex.json中引入组件

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置,可选值为 top bottom right leftstringcenter
duration动画时长,单位为毫秒*numberobject*
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离(状态栏高度)booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue
事件名说明参数
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表示选择日期区间stringsingle
title日历标题string日期选择
color主题色,对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期,typemultiplerange时为数组*timestamptimestamp[]*
row-height日期行高*numberstring*
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题(年月)booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60
readonly v1.9.1是否为只读状态,只读状态下不能选择日期booleanfalse

当 Calendar 的 poppable 为 true 时,支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置,可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

当 Calendar 的 type 为 range 时,支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数,默认无限制*numberstring*
range-prompt范围选择超过最多可选天数时的提示文案*stringnull*
show-range-prompt范围选择超过最多可选天数时,是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

日历中的每个日期都对应一个 Day 对象,通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型,可选值为selectedstartmiddleenddisabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring
事件名说明回调参数
select点击任意日期时触发*value: Date
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发,若show-confirmtrue,则点击确认按钮后触发*value: Date
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent
名称说明
title自定义标题
footer自定义底部区域内容