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:

d477f9ce7bf77f53fbcf36bec1b69b7a
44a8922e6607b31d059827e4b04a93b9

<el-button @click="showTimePicker">选择时间</el-button>
<el-dialog title="选择时间" :visible.sync="timePickerVisible">
  <el-time-picker v-model="selectedTime" format="HH:mm:ss"></el-time-picker>
  <div slot="footer">
    <el-button @click="timePickerVisible = false">取消</el-button>
    <el-button type="primary" @click="selectTime">确定</el-button>
  </div>
</el-dialog>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

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

855348821b2e8f2cc4b633bf98f064df data lalai {

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

} ,

kaedah: {

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

}

};
713e1e4451c8393b8e637e129c6b7b12

3 Laksana pemilihan tarikh

Dalam komponen Vue, tambah pemilih tarikh:
1. ;

;

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

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

Tentukan pembolehubah yang anda perlu gunakan dalam data komponen Vue:

2. (
855348821b2e8f2cc4b633bf98f064df data lalai

855348821b2e8f2cc4b633bf98f064df ) {

return {
  selectedDate: '' // 保存用户选择的日期
};

}
};

2cacc6d41bbb37262a98f745aa00fbf0

Pada ketika ini, kami telah menyelesaikan fungsi asas pemilihan masa dan pemilihan tarikh. Dengan menggunakan komponen yang disediakan oleh Vue dan Element Plus, kami boleh melaksanakan keperluan biasa ini dengan mudah.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan pemilihan masa dan pemilihan tarikh, dan menunjukkan proses pelaksanaan menggunakan contoh kod mudah. Dengan membaca artikel ini, anda boleh menguasai cara menggunakan Vue dan Element Plus dengan cepat untuk memenuhi keperluan pemilihan masa dan pemilihan tarikh dalam projek. Saya harap artikel ini membantu anda, dan saya berharap anda mendapat hasil yang lebih baik dalam pembangunan web!

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan pemilihan masa dan pemilihan tarikh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!