<template>
<yk-tooltip
:arrow="false"
placement="bottom"
:trigger="['focus', 'none']"
:open="openTimepicker"
:close-delay="0"
:overlay-style="{
backgroundColor: '#fff',
color: '#000',
padding: '2px 0 8px',
transform: 'translateY(-8px)',
}"
@open-change="onOpenPickerChange"
>
<yk-input
v-if="type === 'time'"
v-model="inputValue"
placeholder="请选择时间"
:size="size"
:style="style"
:disabled="disabled"
@focus="onFocusInput"
@change="onChangeInput"
>
<template #suffix>
<IconCloseOutline
v-if="isDelete"
class="input-icon delete-icon"
@mouseleave="isDelete = false"
@click="onClickDelete"
/>
<IconTimeOutline
v-else
class="input-icon"
@mouseenter="isDelete = true"
/>
</template>
</yk-input>
<div v-else ref="rangeWrapperRef" class="range-picker-wrapper">
<yk-input
ref="startInputRef"
v-model="startInputValue"
placeholder="开始时间"
size="m"
style="width: 140px"
@focus="onFocusStartInput"
@change="onChangeInput"
></yk-input>
<div>-</div>
<yk-input
ref="endInputRef"
v-model="endInputValue"
placeholder="结束时间"
size="m"
style="width: 140px"
@focus="onFocusEndInput"
@change="onChangeInput"
></yk-input>
<IconCloseOutline
v-if="isDelete"
class="input-icon delete-icon"
@mouseleave="isDelete = false"
@click="onClickDelete"
/>
<IconTimeOutline
v-else
class="input-icon"
@mouseenter="isDelete = true"
/>
</div>
<template #content>
<div class="yk-timepicker-container">
<div class="yk-timepicker">
<div v-if="hourColumn" ref="hourColRef" class="yk-timepicker-column">
<ul>
<li
v-for="h in hourNum"
ref="cellHourRef"
:class="[
'yk-timepicker-cell',
{ 'yk-timepicker-cell-selected': selected.hour[h - 1] },
{ 'yk-timepicker-cell-disabled': isDisabled('hour', h - 1) },
]"
@click.left="selcetCell('hour', h)"
>
{{ getNeededValue('hour', h - 1) }}
</li>
</ul>
</div>
<div v-if="minuteColumn" ref="minColRef" class="yk-timepicker-column">
<ul>
<li
v-for="m in 60"
ref="cellMinutRef"
:class="[
'yk-timepicker-cell',
{ 'yk-timepicker-cell-selected': selected.minute[m - 1] },
{
'yk-timepicker-cell-disabled': isDisabled('minute', m - 1),
},
]"
@click.left="selcetCell('minute', m)"
>
{{ getNeededValue('minute', m - 1) }}
</li>
</ul>
</div>
<div v-if="secondColumn" ref="secColRef" class="yk-timepicker-column">
<ul>
<li
v-for="s in 60"
ref="cellSecondRef"
:class="[
'yk-timepicker-cell',
{ 'yk-timepicker-cell-selected': selected.second[s - 1] },
{
'yk-timepicker-cell-disabled': isDisabled('second', s - 1),
},
]"
@click.left="selcetCell('second', s)"
>
{{ getNeededValue('second', s - 1) }}
</li>
</ul>
</div>
<div
v-if="normalizedUse12Hours"
ref="halfColRef"
class="yk-timepicker-column"
>
<ul>
<li
:class="[
'yk-timepicker-cell',
{ 'yk-timepicker-cell-selected': halfDay === 'am' },
]"
@click.left="onClickHalfDay('am')"
>
AM
</li>
<li
:class="[
'yk-timepicker-cell',
{ 'yk-timepicker-cell-selected': halfDay === 'pm' },
]"
@click.left="onClickHalfDay('pm')"
>
PM
</li>
</ul>
</div>
</div>
<div v-if="$slots.extra" class="yk-timepicker-footer-extra-wrapper">
<slot name="extra"></slot>
</div>
<div v-if="!disableConfirm" class="yk-timepicker-footer">
<yk-button type="secondary" size="s" @click="onClickNow">
此刻
</yk-button>
<yk-button size="s" @click="onConfirm">确定</yk-button>
</div>
</div>
</template>
</yk-tooltip>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { startWithZero, getNowTimeData, checkTimeStr } from './util'
import type {
TimeSelected,
TimeType,
TimeValue,
ScrollBehavior,
TimePickerProps,
HalfDay,
PickerValue,
RangeTime,
} from './time-picker'
const props = withDefaults(defineProps<TimePickerProps>(), {
modelValue: '',
defaultValue: '',
size: 'l',
style: null,
disabled: false,
disableConfirm: false,
step: null,
type: 'time',
use12Hours: false,
format: 'hh:mm:ss',
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
})
const emit = defineEmits(['update:modelValue'])
const inputValue = ref<string | undefined>()
const startInputValue = ref<string | undefined>()
const endInputValue = ref<string | undefined>()
const selectedValue = ref<PickerValue>({
time: { hour: '', minute: '', second: '' },
startTime: { hour: '', minute: '', second: '' },
endTime: { hour: '', minute: '', second: '' },
})
const confirmedValue = ref<PickerValue>({
time: { hour: '', minute: '', second: '' },
startTime: { hour: '', minute: '', second: '' },
endTime: { hour: '', minute: '', second: '' },
})
const selected = ref<TimeSelected>({
hour: Array(24).fill(false),
minute: Array(60).fill(false),
second: Array(60).fill(false),
})
const hourColRef = ref<HTMLElement>()
const minColRef = ref<HTMLElement>()
const secColRef = ref<HTMLElement>()
const rangeWrapperRef = ref<HTMLElement>()
const startInputRef = ref()
const endInputRef = ref()
const openTimepicker = ref(false)
const isDelete = ref(false)
const cellMinutRef = ref([])
const cellHourRef = ref([])
const cellSecondRef = ref([])
const halfColRef = ref()
const halfDay = ref<HalfDay>('pm')
const isStartTime = ref(false)
const isEndTime = ref(false)
let itemHeight: number
// 计算单个时间选项是否禁用
const isDisabled = computed(() => {
const disabledHourArr = props.disabledHours()
const disabledMinutesArr = props.disabledMinutes()
const disabledSecondsArr = props.disabledSeconds()
return (type: TimeType, index: number) => {
let _arr: number[] = []
switch (type) {
case 'hour':
_arr = disabledHourArr
break
case 'minute':
_arr = disabledMinutesArr
break
case 'second':
_arr = disabledSecondsArr
break
default:
break
}
return _arr.includes(index)
}
})
const hourNum = computed(() => {
return normalizedUse12Hours.value ? 13 : 24
})
const hourColumn = computed(() => {
return [/hh:mm:ss/gi, /hh:mm/gi, /hh/gi].some((regex) =>
regex.test(normalizedFormat.value),
)
})
const minuteColumn = computed(() => {
return [/hh:mm:ss/gi, /mm:ss/gi, /mm/gi].some((regex) =>
regex.test(normalizedFormat.value),
)
})
const secondColumn = computed(() => {
return [/hh:mm:ss/gi, /mm:ss/gi, /ss/gi].some((regex) =>
regex.test(normalizedFormat.value),
)
})
const normalizedFormat = computed(() => {
if (/a/gi.test(p
Vue3+Ts+Less 开发的前端UI框架项目源码.zip（教程+源代码+附上详细代码说明） （1035个子文件） 
index.html 345B
commitlint.config.js 66B index.js 62B components.json 4KB package.json 3KB package.json 2KB package.json 823B tsconfig.json 813B package.json 736B package.json 732B tsconfig.json 692B tsconfig.json 528B develops.json 431B tsconfig.node.json 386B tsconfig.json 356B tsconfig.json 343B designs.json 214B theme.less 5KB variables.less 4KB markdown.less 4KB basis.less 3KB index.less 3KB index.less 3KB index.less 3KB timeline.less 3KB index.less 3KB checkbox.less 3KB animate.less 3KB variables.less 3KB index.less 3KB index.less 3KB index.less 2KB index.less 2KB index.less 2KB timeline-item.less 2KB preview.less 2KB select-view.less 2KB radio-shape.less 2KB file-list.less 2KB index.less 2KB picture-list.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 2KB index.less 1KB index.less 1KB index.less 1KB button-shape.less 1KB index.less 1KB index.less 1KB functions.less 1KB tree-view.less 1KB tree-view.less 1KB index.less 1KB index.less 1KB index.less 975B color-card.less 931B crop.less 916B main.less 915B index.less 913B index.less 885B index.less 851B normalize.less 832B index.less 832B index.less 818B index.less 818B draggle.less 755B slider-marks.less 733B icon.less 715B radio-group.less 714B mixin.less 695B index.less 689B tree-node-switcher.less 631B tree-node.less 592B index.less 498B index.less 494B index.less 363B index.less 341B checkbox-group.less 295B variables.less 294B index.less 233B index.less 232B index.less 231B index.less 192B index.less 169B variables.less 154B index.less 91B index.less 75B index.less 62B index.less 60B index.less 59B共 1035 条
- 1
- 2
- 3
- 4
- 5
- 6
- 11
资源评论
不会倒的鸡蛋
- 粉丝: 1615
- 资源: 307
最新资源
- Python_免费开源加密交易机器人.zip
- Python_免费是指《帝国时代2》引擎的自由开源克隆版.zip
- Python_面向科学家和工程师的深度学习和强化学习库.zip
- Python_免费在线教科书的Jupyter笔记本为快速计算线性代数课程.zip
- 移动机器人路径规划（人工势场法），本次路径规划的代码是基于matlab语言的，该方法的基本思想是机器人受到来自目的地的引力以及受到来自障碍物的斥力 这 些力形成合力后驱使机器人避开障碍物后移向目的地
- 机械设计堆垛机sw18可编辑全套设计资料100%好用.zip.zip
- 多编组列车仿真，车体加载fluent里导出的气动力进行仿真 利用脚本建立fluent里的导出的气动力数据和simpack力元的接口进行快速的数据更新
- 编译原理词法分析的实现
- 电压电流双闭环NPC三电平逆变器的仿真，采用载波层叠调制
- Wincc报表模板 1、数据库存储全局脚本 存储时间自由设置 2、报表查询VBS脚本，带下拉框，组合框，查询内容自由选择，时间自由选择 3、导出到本地EXECL 并打印 4、各类控件，语音报警
- 数据快速拷贝软件，拷贝速度为WINDOWS的2-7倍 具有不间断、挑选拷贝、快速删除、剪切等功能
- MATLAB基础应用精讲-【智能优化算法】黏菌算法（SMA）（附MATLAB和python代码实现）
- CS1.5★ALAN装逼脚本Ver.2025.03.弹道版【ALT开压枪】
- 有源电力滤波器APF MATLAB仿真 选阶补偿，matlab版本V2014，基于LCL滤波器的I型三电平拓扑仿真模型，三相四线制，软件锁相环，C语言编程提取谐波指令，直流电压和中点电位控制稳定
- 修复版早起打卡+完美细教程+修复支付接口问题已完美运营
- 光储一体机仿真模型，光伏与储能在直流侧耦合，采用boost电路加NPC电路，基于MATLAB Simulink建模仿真 闭环控制仿真模型，可以进行功率调度和充放电控制 仿真模型使用MATLAB 2
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
