vue之封装预约类组件
0. 展示所有数据，【禁用】的展示【灰色】，【没选中】的展示【白色】，【选中的】时间范围展示【红色】
1. 点击两次，锁定时间范围。
2. 如果有跨越了禁用时间段的话，则重新选择。
3. 【禁用的时间范围】 和 【全部的时间范围】，后端会返回。
4. 插件会返回选择的时间。
<template>
<view class="item" v-bind:class="{active:item.active,disabled:item.disabled}" v-for="(item, index) in list"
:key="index" v-on:click="clickItem(item,index)">
<view style="display: flex;justify-content: space-between;">
<view>
{{item.time}}
</view>
<view v-if="item.disabled">
该条已被<text style="color: white;">{{item.bookedBy}}</text>预约
</view>
</view>
</view>
</template>
<!-- 预约类时间段选择组件的开发思路：
0. 展示所有数据，【禁用】的展示【灰色】，【没选中】的展示【白色】，【选中的】时间范围展示【红色】
1. 点击两次，锁定时间范围。
2. 如果有跨越了禁用时间段的话，则重新选择。
3. 【禁用的时间范围】 和 【全部的时间范围】，后端会返回。
4. 插件会返回选择的时间。
-->
<script>
export default {
// props接收两个值，禁用的时间段和全部的时间段
props: {
// 禁用的时间
checkTime: {
type: Array
},
// 所有的时间
allTime: {
type: Array
},
},
data() {
return {
// 用data接收props传来的值，不要直接操作props
// list用于存储传来的【全部的时间】，以下是传来数据的格式
// "time": "08:00-08:30", "disabled": false, "active": false
list: this.allTime,
// 【禁用的时间】
disabledList: this.checkTime,
// item 点击的次数
clickNumber: 0,
// 点击item，把下标存到数组。
indexArr: [],
}
},
created() {
this.initTime();
},
computed: {
// 计算属性，用于返回给父组件，选值的范围。
timeList() {
let list = []
this.list.forEach(item => {
if (item.active) {
list.push(item)
}
})
let obj = {
start: '',
end: ''
}
if (list.length) {
obj.start = list[0].time.split('-')[0]
obj.end = list[list.length - 1].time.split('-')[1];
}
//console.log("computed监听",obj)
return obj;
}
},
methods: {
// 通过传来的数据构建时间数组
initTime() {
// 根据【所有时间】和【禁用时间】，确定列表
this.list.forEach(item => {
this.disabledList.forEach(vitem => {
// 判断是否有list的time和disabled的time一致
// 有的话，则需要禁用掉
const hasTime = item.time == vitem.time
if (hasTime) {
item.disabled = true
}
})
})
},
clickItem(item, index) {
// 如果是disable状态，直接不让点击
if (item.disabled) {
return
}
// 点击次数增加，用于记录点击的次数
this.clickNumber++;
// 记录第一次点击，且把数组的index值，存到indexArr 里面
if (this.clickNumber == 1) {
this.indexArr.push(index)
}
// 记录第二次点击，且把数组的index值，存到indexArr 里面
if (this.clickNumber == 2) {
this.indexArr.push(index)
}
console.log(this.indexArr)
// 记录第三次点击，且把数组的index值，存到indexArr 里面
// 记录第三次的值，是为了下面重置第三次为第一次。
// 用于接下来的循环
if (this.clickNumber == 3) {
this.indexArr = [index]
}
// 给index排序
this.indexArr = this.indexArr.sort((a, b) => a - b);
// 如果点击的次数正好是第三次的时候
// 点击次数重置为1
// 我们的目的是点击两次，锁定时间范围，所以三次以上的，可以重置上面的步骤。
if (this.clickNumber % 3 == 0) {
// 重置成点击一次的状态。
this.clickNumber = 1;
// list中的active设置成false
this.list.forEach(v => v.active = false);
// 当前点击的item,设置active是true
item.active = true
}
// 验证，如果选择多个的时候，跨着disabled，则不让选择。
// 如果选择的，没有跨着disabled，则都给选择上。
this.getCheckList(item)
},
getCheckList(vitem) {
try {
console.log("getCheckList", this.list, this.indexArr)
this.list.forEach((item, idx) => {
// this.indexArr 存两个值
const [start, end] = this.indexArr
if (idx >= start && idx <= end) {
// 遍历List,如果有disabled的抛出异常。
// 如果没有，则把区间内的赋值active
if (item.disabled) {
throw new Error("包含disabled状态数据")
}
item.active = true
}
})
} catch (err) {
// 抛出异常----选中的区间内有disabled的item的时候。
// list 重置
this.list.forEach(v => v.active = false);
// 当前item为选中状态
vitem.active = true;
}
vitem.active = true;
// 返回给父组件
this.$emit('getTime', this.timeList)
}
}
}
</script>
<style>
.item {
line-height: 40px;
background: #fff;
border-bottom: 1px solid #D2D2D2;
}
.item.active {
background: darkred;
color: black;
}
.item.disabled {
background: #888888;
color: white;
}
</style>
<TimeSelection @getTime='getTime' ref="child" :allTime="timeSelectList"
:checkTime="timeSelectDisabledList" />
getTime(val) {
console.log("getTime组件选择后的结果", val)
},
// 后端返回所有的时间段列表
timeSelectList: [],
// 已选时间段列表
timeSelectDisabledList: [],