<template> <div style="display:flex"> <el-input type="number" id="days" v-model.number="duration.fDay" @input="updateTotalMilliseconds" /> <el-button type="text" disabled>:天</el-button> <el-input type="number" id="hours" v-model.number="duration.fHours" @input="updateTotalMilliseconds" /> <el-button type="text" disabled>:小时</el-button> <el-input type="number" id="minutes" v-model.number="duration.fMinutes" @input="updateTotalMilliseconds" /> <el-button type="text" disabled>:分钟</el-button> <el-input type="number" id="seconds" v-model.number="duration.fSeconds" @input="updateTotalMilliseconds" /> <el-button type="text" disabled>:秒</el-button> </div> </template> <script> export default { props:{ duration: { type: Object, default: () => ({}) }, }, computed: { // 只返回数据,具体时间由后台计算 totalMilliseconds: function() { return ( this.duration ); } }, watch: { // 监听外部毫秒数的变化,如果需要的话(通常不需要,因为我们是计算得到的) externalMilliseconds(newVal) { // 如果需要,可以在这里实现将毫秒数转换回天、小时、分钟和秒 } }, methods: { updateTotalMilliseconds() { // 每次输入改变时,都会触发这个方法,但因为我们使用computed属性,所以这里实际上不需要做任何事情 // 如果需要额外的逻辑(如限制输入范围),可以在这里添加 this.$emit('update:externalMilliseconds', this.duration); // 如果需要,可以触发一个事件来通知父组件 }, } }; </script>