vue⾃⼰捣⿎⽉⽇程⽇历组件（WSchedule）
需求：想要⼀个周⽇程表，记录每天的计划，点击可查看详情。可⾃定义时间段通过后台获取时间段显⽰
分析：
1. 通过需求，我联想到在⼤学期间就⽤过超级课程表app这款软件，其中课表和这个需求很像，只不过这个需求第⼀列的时间段是⾃定
义的，不是上午下午两个，但是原理都差不多
2. 原本想⼀些第三⽅插件使⽤，由于时间充⾜，⽽且⾃⼰也想封装成⼀个组件⽅便以后或许会碰到类似的需求，于是⾃⼰⼿动写了⼀
个⽇程⽇历。
效果如下：⾃⼰写的肯定有不⾜的地⽅，如有问题请⼤佬们提出，进⾏改进
npm包
npm i wschedule -S
封装组件
使⽤
<template>
<div id="app">
<WSchedule :data="timePeriodList" @handleDetail="handleDetail" @changeWeek="changeWeek">
<template v-slot:thing="{row}">
<span>时段：{{ row.timePeriod }}</span>
<span>课程：{{ urse }}</span>
<span>值班员：{{ row.watchman }}</span>
<span>地点：{{ row.place }}</span>
</template>
</WSchedule>
</div>
</template>
<script>
import WSchedule from "./views/week";
import WSchedule from "./views/week";
export default {
components:{WSchedule },
data() {
/**
* 获取当天时间
* @returns {string}
*/
function getCurDay(){
var datetime = new Date();
var year = FullYear();
var month = Month() + 1 < 10 ? "0" + (Month() + 1) : Month() + 1;      var date = Date() < 10 ? "0" + Date() : Date();
return `${year}-${month}-${date}`
}
return {
timePeriodList: [
{
timePeriod: '08:00~10:00',
schedule: [
{
timePeriod: '08:00~10:00',
date: '2022-01-17',
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 1,
},
{
date: '2022-01-18',
timePeriod: '08:00~10:00',
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 2,
},
{
date: '2022-01-18',
timePeriod: '08:00~10:00',
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 3,
}
]
},
{
timePeriod: '10:00~12:00',
schedule: [
{
timePeriod: '10:00~12:00',
date: '2022-01-17',
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 1,
},
{
date: '2022-01-19',
timePeriod: '10:00~12:00',
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 2,
},
},
{
date: getCurDay(),
timePeriod: '10:00~12:00',              course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 3,
}
]
},
{
timePeriod: '14:00~16:00',          schedule: [
{
timePeriod: '14:00~16:00',              date: getCurDay(),
course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 1,
},
{
date: getCurDay(),
timePeriod: '14:00~16:00',              course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 2,
},
{
date: getCurDay(),
timePeriod: '14:00~16:00',              course: '⼤学英语',
watchman: 'wqq',
place: 'ces',
status: 3,
}
]
}
],
}
},
methods: {
/**
* 点击详情
* @param row
*/
handleDetail(row){
console.log(row)
},
/**
* 切换周
* @param date
*/
changeWeek(date){
console.log(date)
}
},
}
</script>
组件完整代码
Html代码
<template>
<div class="course-week">
<div class="week-top">
<div class="week-btn-wrap">
<span @click="getLastWeek">上周</span>
<span @click="getCurWeek">本周</span>
<span @click="getNextWeek">下周</span>
</div>
<span class="w-today-date"> {{ todayDate }}</span>
<div class="w-choose-status">
<div v-for="sta in cardStatus">
<span class="square" :></span>
<span class="title">{{ sta.title }}</span>
</div>
</div>
</div>
<div class="week-table">
<div class="table-header">
<div class="table-week">
<template v-for="(item,index) of weeks">
<span class="w-first" v-if="index===0" :key="index">{{ item }}</span>
<span v-else :key="index">{{ item }}</span>
</template>
</div>
<div class="w-table-date">
<template v-for="(item,index) of months">
<span class="w-first" v-if="index===0" :key="index">
</span>
<template v-else>
<span :key="index" class="w-day-item" :class="{'w-isCurDate':item&&item.isCurDate}">
{{ `${item && item.isCurDate ? item && item.showDate + '(今天)' || '' : item && item.showDate || ''}` }}              </span>
</template>
</template>
</div>
</div>
<div class="w-time-period-list">
<ul class="w-time-period-row">
<!--循环时段，看时段有多少个-->
<template v-if="data.length>0">
<li class="w-time-period-col" v-for="(period,p_index) in data"
:key="`period${p_index}`">
<!--第⼀列显⽰时段-->
<div class="w-time-period"> {{ period.timePeriod }}</div>
<!-- 后⾯显⽰周⼀到周⽇的计划-->
<div class="w-row-day">
<!-- 循环显⽰每周的⽇期-->
<template v-for="(month,m_index) of months">
<!-- v-if="month" 去除数据处理的时候移除数组第⼀个为empty的问题-->
<div v-if="month" :key="`month${m_index}`" class="w-things">
<!-- 循环每个时间段的计划-->
<template v-for="(row,t_index) of period.schedule">
<!-- 根据⽇期和计划的⽇期匹配显⽰然后根据状态显⽰进⾏中已过期未开始-->
<div v-if="row.date===month.date"
:key="`thing${t_index}`"
class="w-thing-item"
@click="handleDetail(row)"
:>
<slot name="thing" :row="row"></slot>
</div>
</template>
</template>
</div>
</template>
</div>
</li>
</template>
<div class="w-noMore" v-else><span>暂⽆数据</span></div>        </ul>
</div>
</div>
</div>
</template>
js代码
<script>
import MyTools from "../utils/MyTools";
export default {
name: "WSchedule",
props: {
data: {
type: Array,
default: []
},
cardStatus: {
type: Object,
default: () => {
return {
1: {
title: '已过期',
color: '#9CADADB7'
},
2: {
title: '进⾏中',
color: '#FF6200'
},
3: {
title: '未开始',
color: '#3291F8'
},box sizing
}
}
}
},
data() {
return {
weeks: [
'时段', '周⼀', '周⼆', '周三', '周四', '周五', '周六', '周⽇',
]
,
todayDate: '',
months: [],
curDate: "",
nowDate: new Date(),
}
},
mounted() {
},
methods: {
/
**
* 获取时间
* @param time
*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。