Cara menggunakan vue dan Element-plus untuk melaksanakan pemilihan masa dan pemilihan tarikh

Cara menggunakan Vue dan Element Plus untuk melaksanakan pemilihan masa dan pemilihan tarikh

Pengenalan:
Dalam pembangunan web, pemilihan masa dan pemilihan tarikh adalah keperluan yang sangat biasa. Vue ialah rangka kerja JavaScript yang popular, dan Element Plus ialah perpustakaan komponen sumber terbuka berdasarkan Vue, yang menyediakan set komponen UI yang kaya. Artikel ini akan memperkenalkan cara menggunakan komponen Vue dan Element Plus untuk melaksanakan pemilihan masa dan pemilihan tarikh.

1. Pasang dan perkenalkan Element Plus
Pertama, kami perlu memasang Element Plus dalam projek Vue kami. Element Plus boleh dipasang melalui npm:

npm install element-plus --save

Selepas pemasangan selesai, kita perlu memperkenalkan gaya dan komponen Element Plus ke dalam fail kemasukan projek (biasanya main.js):

import { createApp } daripada 'vue';
import ElementPlus daripada 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use (ElementPlus);
app.mount('#app');

2. Laksana pemilihan masa

1. Dalam komponen Vue, tambahkan butang dan tetingkap timbul:

2. Tentukan pembolehubah yang anda perlu gunakan dalam data komponen Vue:

data lalai {

return {
  timePickerVisible: false, // 控制时间选择弹窗的显示与隐藏
  selectedTime: '' // 保存用户选择的时间
};

kaedah: {

showTimePicker() {
  this.timePickerVisible = true;
},
selectTime() {
  // 处理用户选择的时间，可以在这里进行一些业务逻辑操作
  console.log(this.selectedTime);
  this.timePickerVisible = false;
}

};

Dalam komponen Vue, tambah pemilih tarikh:
;

<el-date-picker v-model="selectedDate" type="date" placeholder="请选择日期"></el-date-picker>