前端开发技巧vant+vue3

目录

1、v-model的值怎么写

2、vant4时间选择器的使用

---

新手小白学习前端开发，略菜(*^▽^*)

记录下自己踩过的坑

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(":")}`;
},