|
|
@@ -1,5 +1,34 @@
|
|
|
<template>
|
|
|
- <el-time-picker
|
|
|
+ <el-popover :disabled="disabled" :width="400" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <div
|
|
|
+ class="hc-date-time-input el-input el-input--prefix el-input--suffix el-date-editor el-date-editor--time"
|
|
|
+ @keydown.shift.up="keyupShiftUp"
|
|
|
+ @keydown.shift.down="keyupShiftDown"
|
|
|
+ @keydown.shift.left="keyupShiftLeft"
|
|
|
+ @keydown.shift.right="keyupShiftRight">
|
|
|
+ <div :class="isFocus?'is-focus':''" class="el-input__wrapper">
|
|
|
+ <span class="el-input__prefix">
|
|
|
+ <span class="el-input__prefix-inner">
|
|
|
+ <HcIcon class="el-icon el-input__icon" name="time"/>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <input :id="keyname" ref="timePickerRef" v-model="modelValues" :disabled="disabled"
|
|
|
+ :name="keyname" :placeholder="placeholder"
|
|
|
+ :readonly="readonly" autocomplete="off" class="el-input__inner" type="text"
|
|
|
+ @blur="timePickerBlur"
|
|
|
+ @focus="timePickerFocus">
|
|
|
+ <span v-if="clearable" class="el-input__suffix">
|
|
|
+ <span class="el-input__suffix-inner">
|
|
|
+ <HcIcon class="el-icon el-input__icon" name="close-circle"/>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ 11111
|
|
|
+ </el-popover>
|
|
|
+ <!--el-time-picker
|
|
|
:id="keyname"
|
|
|
ref="timePickerRef"
|
|
|
v-model="modelValues"
|
|
|
@@ -19,11 +48,12 @@
|
|
|
@keydown.shift.up="keyupShiftUp"
|
|
|
@keydown.shift.down="keyupShiftDown"
|
|
|
@keydown.shift.left="keyupShiftLeft"
|
|
|
- @keydown.shift.right="keyupShiftRight"></el-time-picker>
|
|
|
+ @keydown.shift.right="keyupShiftRight"></el-time-picker-->
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {nextTick, ref, watch} from 'vue'
|
|
|
+import {ref, watch} from 'vue'
|
|
|
+import HcIcon from "~src/global/components/hc-icon/index.vue"
|
|
|
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
@@ -50,19 +80,22 @@ const props = defineProps({
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
- valueFormat: {
|
|
|
- type: String,
|
|
|
- default: 'HH:mm:ss'
|
|
|
- },
|
|
|
- popperClass: {
|
|
|
+ placeholder: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
+ onKeydown: {
|
|
|
+ type: [Array],
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
//变量
|
|
|
const modelValues = ref(props.modelValue)
|
|
|
const timePickerRef = ref(null)
|
|
|
+const isFocus = ref(false)
|
|
|
|
|
|
//监听
|
|
|
watch(() => [
|
|
|
@@ -76,34 +109,47 @@ const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'visib
|
|
|
//@keydown.shift.up="" @keydown.shift.down="" @keydown.shift.left="" @keydown.shift.right=
|
|
|
|
|
|
const timePickerChange = (val) => {
|
|
|
+ console.log(val)
|
|
|
emit('update:modelValue', val)
|
|
|
emit('change', val)
|
|
|
}
|
|
|
|
|
|
+//失去焦点
|
|
|
const timePickerBlur = (e) => {
|
|
|
+ isFocus.value = false
|
|
|
emit('blur', e)
|
|
|
}
|
|
|
+
|
|
|
+//获取焦点
|
|
|
const timePickerFocus = (e) => {
|
|
|
- console.log('获得焦点', e)
|
|
|
+ isFocus.value = true
|
|
|
emit('focus', e)
|
|
|
}
|
|
|
-const visibleChange = (visibility) => {
|
|
|
- emit('visible-change', visibility)
|
|
|
-}
|
|
|
|
|
|
+//向上
|
|
|
const keyupShiftUp = (e) => {
|
|
|
console.log(e)
|
|
|
}
|
|
|
|
|
|
+//向下
|
|
|
const keyupShiftDown = (e) => {
|
|
|
console.log(e)
|
|
|
}
|
|
|
|
|
|
+//向左
|
|
|
const keyupShiftLeft = (e) => {
|
|
|
console.log(e)
|
|
|
}
|
|
|
|
|
|
+//向右
|
|
|
const keyupShiftRight = (e) => {
|
|
|
console.log(e)
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.hc-date-time-input {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
