可跨天选则次日的时间选择器

原创

已于 2023-10-20 16:42:04 修改 · 2.1k 阅读

于 2023-10-20 15:24:35 首次发布

本文介绍了一个自定义的时间选择器组件，用于在需要选择不可选日期但仍需跨天选择时间的场景，模仿ElementUI的TimePicker组件，并提供了详细的HTML结构、Vue代码和样式设计。

该文章已生成可运行项目，

1、该组件可用在当不可选日期又需要跨天选择时间时的场景，交互效果类似elementUI的TimePicker 时间选择器

2、图例

效果展示

3、父组件代码

// html中使用
<TimePicker :id="'32'" :time="times" @selectTime="(time) => times = time" />

// 引入并注册组件
import TimePicker from "@/components/timePicker";

4、子组件代码


<template>
  <div class="timeInputBox" :id="'t1-' + id" :ref="'ref-' + id">
    <el-input ref="timeInput" :id="'t2-' + id" @focus="focus" v-model="input" :placeholder="placeholder" />
    <div class="menuBox" :class="{ menuBox: true, activemenuBox: show }" :id="'t3-' + id">
      <div class="triangle" :id="'t4-' + id"></div>
      <div class="menuMain" :id="'t5-' + id" @mouseenter="handleMouse('Enter')" @mouseleave="handleMouse('Leave')">
        <div class="leftTime container" :id="'t6-' + id" ref="leftTime" @mouseenter="handleMouse('Enter')"
          @mouseleave="handleMouse('Leave')">
          <div class="timeItem" :id="'t7-' + id" :style="{ height: clientHeight + 'px' }" v-for="item in [1, 2]"
            :key="item + '-1'" />
          <div @click="changeTime('h', item, index)" :ref="'timeItem' + index" v-for="(item, index) in timeList.hour"
            :key="index + '01'" :class="{ activeTime: index == selectHourIndex }" :id="'t8-' + id">{
   
   {
   
    textbuil(item) }}
          </div>
          <div class="timeItem" :id="'t9-' + id" :style="{ height: clientHeight + 'px' }" v-for="item in [1, 2]"
            :key="item + '-2'" />
        </div>
        <div class="rightTime container" :id="'t10-' + id" ref="rightTime" @mouseenter="handleMouse('Enter')"
          @mouseleave="handleMouse('Leave')">
          <div class="timeItem" :id="'t11-' + id" :style="{ height: clientHeight + 'px' }" v-for="item in [1, 2]"
            :key="item + '-3'" />
          <div :id="'t12-' + id" @click="changeTime('m', item, index)" v-for="(item, index) in timeList.minute"
            :key="index + '02'" :class="{ activeTime: index == selectMinuteIndex }">{
   
   {
   
    item }}
          </div>
          <div class="timeItem" :id="'t13-' + id" :style="{ height: clientHeight + 'px' }" v-for="item in [1, 2]"
            :key="item + '-4'" />
        </div>
        <div class="botBut" :id="'t4-' + id">
          <el-button class="elbutton" :id="'t15-' + id" type="text" @click="selectTime('yes', '00:00')">确定</el-button>
          <el-button class="elbutton" :id="'t16-' + id" style="color: #333;" type="text"
            @click="selectTime('close')">取消</el-button>
        </div>
        <div class="line" :id="'t17-' + id" :style="{ top: `calc(50% - ${clientHeight - 5}px)` }"></div>
        <div class="line" :id="'t18-' + id" :style="{ top: `calc(50% + ${5}px)` }"></div>
      </div>
    </div>
  </div>
</template>

<script>
let inTimepickerPage = false
export default {
   
   
  name: "timePicker",
  components: {
   
   },