当前位置：首页 > VUE

vue实现请假条

2026-02-21 02:53:06VUE

Vue 实现请假条功能

请假条功能通常包含表单提交、数据验证和展示等模块。以下是使用 Vue 实现请假条功能的核心步骤和代码示例。

表单结构设计

请假表单通常包含请假类型、开始时间、结束时间、请假原因等字段。使用 Vue 的 v-model 实现数据双向绑定。

<template>
  <div class="leave-form">
    <form @submit.prevent="submitLeaveRequest">
      <div>
        <label>请假类型</label>
        <select v-model="leaveForm.type">
          <option value="annual">年假</option>
          <option value="sick">病假</option>
          <option value="personal">事假</option>
        </select>
      </div>
      <div>
        <label>开始时间</label>
        <input type="datetime-local" v-model="leaveForm.startTime">
      </div>
      <div>
        <label>结束时间</label>
        <input type="datetime-local" v-model="leaveForm.endTime">
      </div>
      <div>
        <label>请假原因</label>
        <textarea v-model="leaveForm.reason"></textarea>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

数据与验证逻辑

在 Vue 的 data 中定义表单数据对象，并使用 methods 实现验证和提交逻辑。

<script>
export default {
  data() {
    return {
      leaveForm: {
        type: 'annual',
        startTime: '',
        endTime: '',
        reason: ''
      }
    }
  },
  methods: {
    validateForm() {
      if (!this.leaveForm.startTime || !this.leaveForm.endTime) {
        alert('请填写完整的时间信息');
        return false;
      }
      if (new Date(this.leaveForm.startTime) >= new Date(this.leaveForm.endTime)) {
        alert('结束时间必须晚于开始时间');
        return false;
      }
      return true;
    },
    submitLeaveRequest() {
      if (!this.validateForm()) return;
      console.log('提交的请假数据:', this.leaveForm);
      // 这里可以添加API调用，将数据发送到后端
    }
  }
}
</script>

样式优化

使用 CSS 为请假表单添加基础样式，提升用户体验。

<style scoped>
.leave-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.leave-form div {
  margin-bottom: 15px;
}
.leave-form label {
  display: block;
  margin-bottom: 5px;
}
.leave-form input,
.leave-form select,
.leave-form textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.leave-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}
</style>