vue遍历数组times2: [ { time: '8:00',click: false }, { time: '9:00',click: true }, {time: '10:00', click: false }, { time: '11:00',click: false }, { time: '12:00', click: true }, { time: '13:00', click: true }, { time: '14:00', click: true }, { time: '15:00', click: true }, { time: '16:00', click: false }, { time: '8:00',click: false }, { time: '9:00',click: true }, { time: '10:00', click: false }, { time: '11:00', click: false }, { time: '12:00', click: true }, { time: '13:00', click: true }, { time: '14:00', click: true }, { time: '15:00', click: true }, { time: '16:00', click: false }, ]实现生成多个方格,click的值表示该方格是否可以选中,可选为蓝色,不可选为灰色,从鼠标按下触发的方格开始,拖动鼠标选中多个方格,到鼠标弹起触发的方格结束,都是选中的方格,但是只可选择一段且连续的方格。选中的方格颜色为红色,
时间: 2023-04-04 12:01:05 浏览: 52
可以使用vue的v-for指令遍历数组,根据click的值来设置方格的颜色,然后使用鼠标事件监听器来实现选中多个方格的功能。具体实现可以参考以下代码:
<template>
<div class="grid-container">
<div v-for="(item, index) in times2" :key="index" :class="{'grid-item': true, 'clickable': item.click, 'selected': item.selected}"
@mousedown="startSelect(index)" @mousemove="select(index)" @mouseup="endSelect(index)">
{{ item.time }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
times2: [
{ time: '8:00', click: false, selected: false },
{ time: '9:00', click: true, selected: false },
{ time: '10:00', click: false, selected: false },
{ time: '11:00', click: false, selected: false },
{ time: '12:00', click: true, selected: false },
{ time: '13:00', click: true, selected: false },
{ time: '14:00', click: true, selected: false },
{ time: '15:00', click: true, selected: false },
{ time: '16:00', click: false, selected: false },
{ time: '8:00', click: false, selected: false },
{ time: '9:00', click: true, selected: false },
{ time: '10:00', click: false, selected: false },
{ time: '11:00', click: false, selected: false },
{ time: '12:00', click: true, selected: false },
{ time: '13:00', click: true, selected: false },
{ time: '14:00', click: true, selected: false },
{ time: '15:00', click: true, selected: false },
{ time: '16:00', click: false, selected: false },
],
selecting: false,
start: -1,
end: -1,
};
},
methods: {
startSelect(index) {
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)