微信小程序引用 vant weapp calendar选择器
作者:xlnxin发布时间:2025-02-07分类:编程知识浏览:139
导读:npmi@vant/weapp-S--production 安装组件修改app.json,将app.json中的“style”:“v2”去除修改pro...
npm i @vant/weapp -S --production 安装组件
修改app.json,将 app.json 中的 “style”: “v2” 去除
修改 project.config.json,最后添加"packNpmManually": true,
"packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ],
json中引入组件
"usingComponents": { "van-calendar": "@vant/weapp/calendar/index" "van-cell": "@vant/weapp/cell/index" }
wxml代码
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" /> <van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
js代码
data: { date: '', show: false, }, onDisplay() { this.setData({ show: true }); }, onClose() { this.setData({ show: false }); }, formatDate(date) { date = new Date(date); return `${date.getMonth() + 1}/${date.getDate()}`; }, onConfirm(event) { this.setData({ show: false, date: this.formatDate(event.detail), }); },
- 编程知识排行
- 最近发表