时长输入框、用时输入框

行内组件，用于设定 【时 分 秒】 时长，转存结果为 【毫秒】

<template><div class="time-inputs"><div class='time-input-div' v-if='input'><input class='time-input' type="number" v-model.number="hours" @input="updateMilliseconds" placeholder="时" min='0' /><span class='uom'>时</span><input class='time-input' type="number" v-model.number="minutes" @input="updateMilliseconds" placeholder="分" min='0' /><span class='uom'>分</span><input class='time-input' type="number" v-model.number="seconds" @input="updateMilliseconds" placeholder="秒" min='0' /><span class='uom'>秒</span><button @click="resetTime" class="reset-button">置零</button> <!-- 添加置零按钮 --></div><div class='time-input-div' v-else><div class='time-input'>{{hours}}</div><span class='uom'>时</span><div class='time-input'>{{minutes}}</div><span class='uom'>分</span><div class='time-input'>{{seconds}}</div><span class='uom'>秒</span></div></div>
</template><script>
export default {props: {// 调用处绑定回写值value: {type: Number,default: 0,required: true,},// 是否输入input: {type: Boolean,default: true,required: false,},},data() {return {hours: 0,minutes: 0,seconds: 0,milliseconds: 0,};},computed: {totalMilliseconds() {return (this.hours * 3600000 +this.minutes * 60000 +this.seconds * 1000 +this.milliseconds);},},watch: {totalMilliseconds(newVal) {this.$emit('input', newVal);},value(newVal) {const total = newVal || 0;this.hours = Math.floor(total / 3600000);this.minutes = Math.floor((total % 3600000) / 60000);this.seconds = Math.floor((total % 60000) / 1000);this.milliseconds = total % 1000;},},mounted() {let that = this;that.value = that.value || 0; // 确保有初始值const total = that.value || 0;that.hours = Math.floor(total / 3600000);that.minutes = Math.floor((total % 3600000) / 60000);that.seconds = Math.floor((total % 60000) / 1000);that.milliseconds = total % 1000;},methods: {resetTime() {this.hours = 0;this.minutes = 0;this.seconds = 0;this.milliseconds = 0;this.updateMilliseconds(); // 更新毫秒数},updateMilliseconds() {// 这里可以根据需要更新毫秒数的逻辑this.milliseconds = this.totalMilliseconds % 1000;},},
};
</script><style scoped>
.time-inputs {display: inline-block;width: 100%;
}
.time-input-div {width: 100%;display: flex;justify-content: space-between;align-items: center;
}
.time-input {display: flex;justify-content: center;align-items: center;width: 50px;height: 30px;border: 1px solid #d7d7d7;border-radius: 5px;text-align: center;transition: border-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */outline: none; /* 去掉默认的聚焦轮廓 */
}.time-input:focus {border-color: #0044FF; /* 输入框聚焦时边框颜色变为蓝色 */box-shadow: 0 0 5px 1px rgba(40, 97, 255, 0.4); /* 添加发光效果 */
}.uom {margin: 0 5px;
}.reset-button {height: 30px;margin-left: 10px; /* 为按钮添加左边距 */padding: 0 10px; /* 为按钮添加内边距 */background-color: #0043fd; /* 按钮背景颜色 */color: white; /* 按钮文字颜色 */border: none; /* 去掉按钮边框 */border-radius: 5px; /* 按钮圆角 */cursor: pointer; /* 鼠标悬停时显示为手型 */display: flex;justify-content: center;align-items: center;
}.reset-button:hover {background-color: #3d6efc; /* 鼠标悬停时按钮颜色变化 */
}
</style>

编辑调用

<CTimeInputBox v-model:value="model.minLeadtime" style='width: 100%'/>

只读调用

<CTimeInputBox :input='false' v-model:value='text'></CTimeInputBox>