vue实现请假条
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>扩展功能
- 历史记录展示：添加一个组件用于展示已提交的请假记录。
- 状态管理：使用 Vuex 管理请假数据状态，方便跨组件共享。
- 后端集成：通过 Axios 与后端 API 交互，实现数据持久化。
以上代码和步骤提供了实现请假条功能的基础框架，可根据实际需求进一步扩展和完善。
