首页 > 其他分享 >vue 多时间段范围选择及回显 组件封装

vue 多时间段范围选择及回显 组件封装

时间:2024-08-12 15:07:29浏览次数:9  
标签:flex vue false 回显 height isSelected vw 封装 id

 

<template>
    <div class="flex-col">
        <ul>
            <li v-for="(item,index) in classActiveList"  :key="index"  >
            <!-- @click="toggleSelection(item.id)" -->
                <div  :style="{ backgroundColor: item.isSelected ? '#3bbe9b' : '' }"></div>
            </li>
        </ul>
        <div class="num">
            <span>0</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
            <span>19</span>
            <span>20</span>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
                timeIntervals:[Object],
        },
        data() {
            return {
                timeLine: {
                    flag: 0,
                    preid: -1,
                    idList: [{},
                        {
                            id: 0,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 1,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 2,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 3,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 4,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 5,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 6,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 7,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 8,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 9,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 10,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 11,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 12,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 13,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 14,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 15,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 16,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 17,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 18,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 19,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 20,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 21,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 22,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 23,
                            isSelected: false,
                        },
                        {}
                    ]
                }
            };
        },
        computed:{
            classActiveList(){
                let activeTime = this.getTimeRangeArray(this.timeIntervals.beginTime,this.timeIntervals.endTime)
                activeTime.pop()
                let timeArr = this.timeLine.idList.map((res,index)=>{
                    if(activeTime.includes(res.id)){
                        res.isSelected = true
                    }
                    return res
                })
                return timeArr
            },
        },
        methods: {
            toggleSelection(id) {
                this.timeLine.idList.forEach(item => {
                    if (item.id === id) {
                        item.isSelected = !item.isSelected;
                    }
                });
            },
            getTimeRangeArray(startTimeStr, endTimeStr) {  
              const startTime = parseInt(startTimeStr.split(':')[0], 10);  
              const endTime = parseInt(endTimeStr.split(':')[0], 10);  
              let result = [];  
              if (endTime < startTime) {  
                  for (let hour = startTime; hour <= 23; hour++) {  
                      result.push(hour);  
                  }  
                  for (let hour = 0; hour <= endTime; hour++) {  
                      result.push(hour);  
                  }  
              } else {  
                  for (let hour = startTime; hour <= endTime; hour++) {  
                      result.push(hour);  
                  }  
              }  
              return result;  
            }
        }
    };
</script>
<style lang="scss" scoped>
    .flex-col {
        display: flex;
        margin-bottom: 0.69vw;
        flex-flow: column nowrap;
    }

    ul {
        height: 1.39vw;
        margin-bottom: 0vw;
        padding: 0.69vw 1.32vw;
        display: flex;
        flex-flow: row nowrap;

        li {
            cursor: pointer;
            list-style: none;
            float: left;
            height: 1.39vw;
            padding: 0.42vw 0;
        }

        li:nth-child(even) {
            div {
                width: 1.94vw;
                height: 0.56vw;
                margin-top: 0.14vw;
                background-color: rgb(232, 234, 236);
            }
        }

        li:nth-child(odd) {
            div {
                width: 0.49vw;
                height: 0.69vw;
                border-radius: 50%;
                margin-top: 0.07vw;
                border: 0.07vw solid rgb(59, 190, 155);
            }
        }
    }

    .num {
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        padding-left: 1.25vw;
        margin-top: 0.69vw;
        span {
            display: inline-block;
            width: 2.42vw;
            line-height: 1.5;
            font-size: 0.83vw;
        }

        span:last-child {
            margin-right: 0vw;
        }
    }
</style>

 

标签:flex,vue,false,回显,height,isSelected,vw,封装,id
From: https://www.cnblogs.com/kaijiangyugty/p/18354982

相关文章

  • Django项目与Vue的集成
    Django项目与Vue的集成在现代Web开发领域,前后端分离已成为一种主流趋势。Django,作为一个强大的PythonWeb框架,以其丰富的功能和高度的可扩展性而受到开发者的青睐。而Vue.js,作为一个轻量级的渐进式JavaScript框架,以其简洁的API和灵活的组件系统成为前端开发的热门选择。将Django......
  • 基于SpringBoot+MySQL+SSM+Vue.js的物业管理系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的物业管理系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+Sprin......
  • 基于SpringBoot+MySQL+SSM+Vue.js的大学生兼职系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的大学生兼职系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+Spr......
  • 基于SpringBoot+MySQL+SSM+Vue.js的线上教育培训办公系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的线上教育培训办公系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybat......
  • Vue + ElementUI表格内实现图片点击放大效果的两种方式
    方式一:使用el-popover弹出框trigger属性用于设置何时触发Popover(弹出框)属性值有:hover、click、focus和manualstyle="cursor:pointer":当鼠标放上去时让img标签出现小手状态<el-table-columnlabel="物品图片"header-align="center"align="center"><templates......
  • 基于flask+vue框架的基于Web民宿管理系统的设计与实现[开题+论文+程序]-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,民宿作为一种新兴的住宿方式,凭借其独特的文化体验、个性化的服务以及灵活的价格策略,逐渐受到广大旅行者的青睐。然而......
  • 基于flask+vue框架的的奶茶店预约订单系统[开题+论文+程序]-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着消费观念的升级和生活节奏的加快,奶茶店作为休闲饮品的主要提供者,其市场需求日益增长。然而,在高峰时段,顾客往往需要排队等候,这不仅影响......
  • Vue.js 项目中集成高德地图 API
    要在Vue.js项目中集成高德地图API,你可以按照以下步骤操作:###第一步:引入高德地图API首先,你需要在你的Vue项目中引入高德地图的JSAPI。可以通过在HTML文件中直接引入CDN链接或者使用npm安装的方式。####通过CDN引入:在`public/index.html`文件中的`<head......
  • Vue 3 Composition API:构建可复用逻辑的艺术
    Vue3引入了CompositionAPI,这是一种新的组件选项,允许开发者更灵活地组织组件逻辑。使用CompositionAPI,我们可以将组件逻辑分解为可复用的函数,从而提高代码的模块化和可维护性。本文将详细介绍如何使用Vue3的CompositionAPI创建可复用的逻辑。一、CompositionAP......
  • Vue 3 SSR的革新之旅:服务器端渲染的改进与实践
    服务器端渲染(SSR)是一种将Web应用的UI渲染过程放在服务器端进行的技术。Vue3对SSR的支持进行了全面改进,提升了性能和开发体验。本文将探讨Vue3中SSR的改进点,并提供实践指南。一、SSR的概念与优势SSR允许服务器直接发送完整的HTML文档给客户端,这有助于提高首屏加载速度,改......