目录
新手小白学习前端开发,略菜(*^▽^*)
记录下自己踩过的坑
1、v-model的值怎么写
v-model的值,要写全了
例如,data里定义
params: {
activityInfo: {
activityName: "",
},
},
则v-model="params.activityInfo.activityName"
v-model="params.activityInfo.activityName"
2、vant4时间选择器的使用
vant4时间选择器精确到年月日、时分秒,示例:2023-03-01 12:00:00
使用Popup 弹出层、PickerGroup 选择器组
<van-field
v-model="endTime"
is-link
readonly
name="datePicker"
label="时间选择"
placeholder="点击选择时间"
@click="showPicker"
/>
<van-popup v-model:show="selectTime" position="bottom">
<van-picker-group
title="时间选择"
:tabs="['选择日期', '选择时间']"
@confirm="timeConfirm"
@cancel="onCancel"
>
<van-date-picker
v-model="currentDate"
:min-date="minDate"
:max-date="maxDate"
/>
<van-time-picker
v-model="currentTime"
:columns-type="columnsType"
/>
</van-picker-group>
</van-popup>
参数定义
selectTime: false, //判断弹出框是否展示
currentDate: ["2023", "03", "01"], //打开选择器时默认展示的日期
currentTime: ["12", "00", "00"], //打开选择器时默认展示的时间
columnsType: ["hour", "minute", "second"], //时间的样式
minDate: new Date(2023, 0, 1), //最小日期
maxDate: new Date(2030, 11, 31), //最大日期
endTime: "2023-03-01 12:00:00", //默认值
选择时间的方法
//选择时间
showPicker() {
this.selectTime = true;
},
timeConfirm() {
this.selectTime = false;
this.params.activityInfo.endTime = `${this.currentDate.join(
"-"
)} ${this.currentTime.join(":")}`;
},