Front-End-Entwicklungsfähigkeiten vant+vue3

Inhaltsverzeichnis

1. So schreiben Sie den Wert des V-Modells

2. Verwendung des vant4-Zeitwählers

---

Anfänger Xiaobai lernt Front-End-Entwicklung, ein paar Gerichte (*^▽^*)

Notieren Sie die Fallstricke, auf die Sie gestoßen sind

1. So schreiben Sie den Wert des V-Modells

Der Wert des V-Modells muss vollständig geschrieben werden

Zum Beispiel in Daten definiert

params: {
activityInfo: {
  activityName: "",
},
},

则v-model="params.activityInfo.activityName"

v-model="params.activityInfo.activityName"

2. Verwendung des vant4-Zeitwählers

Der vant4-Zeitwähler ist auf Jahr, Monat, Tag, Stunde, Minute und Sekunde genau. Beispiel: 2023-03-01 12:00:00

Verwenden Sie die Popup-Popup-Ebene und die Auswahlgruppe 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>

Parameterdefinition

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", //默认值

So wählen Sie die Zeit aus

//选择时间
showPicker() {
  this.selectTime = true;
},

timeConfirm() {
  this.selectTime = false;
  this.params.activityInfo.endTime = `${this.currentDate.join(
	"-"
  )} ${this.currentTime.join(":")}`;
},