|
@@ -20,40 +20,45 @@ export default {
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- // 当前累计秒数(对应 Vue3 的 ref 响应式变量)
|
|
|
|
|
- currentSeconds: this.initialSeconds,
|
|
|
|
|
|
|
+ // 当前累计毫秒
|
|
|
|
|
+ currentMillis: Math.floor(this.initialSeconds),
|
|
|
// 定时器实例(用于清理)
|
|
// 定时器实例(用于清理)
|
|
|
timer: null
|
|
timer: null
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
- // 格式化时间:秒数 → 00:00:00 格式(逻辑与 Vue3 完全一致)
|
|
|
|
|
|
|
+ // 格式化时间:毫秒 → 00:00:00.000 格式
|
|
|
formattedTime() {
|
|
formattedTime() {
|
|
|
- const hours = String(Math.floor(this.currentSeconds / 3600)).padStart(2, '0')
|
|
|
|
|
- const minutes = String(Math.floor((this.currentSeconds % 3600) / 60)).padStart(2, '0')
|
|
|
|
|
- const seconds = String(this.currentSeconds % 60).padStart(2, '0')
|
|
|
|
|
- return `${hours}:${minutes}:${seconds}`
|
|
|
|
|
|
|
+ const totalMs = this.currentMillis
|
|
|
|
|
+ const hours = String(Math.floor(totalMs / 3600000)).padStart(2, '0')
|
|
|
|
|
+ const minutes = String(Math.floor((totalMs % 3600000) / 60000)).padStart(2, '0')
|
|
|
|
|
+ const seconds = String(Math.floor((totalMs % 60000) / 1000)).padStart(2, '0')
|
|
|
|
|
+ const milliseconds = String(totalMs % 1000).padStart(3, '0')
|
|
|
|
|
+ return `${hours}:${minutes}:${seconds}.${milliseconds}`
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
// 监听初始秒数变化(对应 Vue3 的 watch 函数)
|
|
// 监听初始秒数变化(对应 Vue3 的 watch 函数)
|
|
|
initialSeconds: {
|
|
initialSeconds: {
|
|
|
handler(newVal) {
|
|
handler(newVal) {
|
|
|
- this.currentSeconds = Math.floor(newVal / 1000); // 更新当前秒数为新初始值
|
|
|
|
|
|
|
+ // 同步为毫秒值并重启计时
|
|
|
|
|
+ const safeVal = Number(newVal)
|
|
|
|
|
+ this.currentMillis = Number.isFinite(safeVal) ? Math.floor(safeVal) : 0
|
|
|
this.startTimer() // 重启定时器
|
|
this.startTimer() // 重启定时器
|
|
|
},
|
|
},
|
|
|
immediate: true
|
|
immediate: true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- // 启动计时(逻辑与 Vue3 一致)
|
|
|
|
|
|
|
+ // 启动计时(毫秒级递增)
|
|
|
startTimer() {
|
|
startTimer() {
|
|
|
// 清除已有定时器,避免重复计时
|
|
// 清除已有定时器,避免重复计时
|
|
|
if (this.timer) clearInterval(this.timer)
|
|
if (this.timer) clearInterval(this.timer)
|
|
|
- // 每秒递增 1 秒
|
|
|
|
|
|
|
+ // 每 10ms 递增 10 毫秒(兼顾性能与精度)
|
|
|
|
|
+ const step = 10
|
|
|
this.timer = setInterval(() => {
|
|
this.timer = setInterval(() => {
|
|
|
- this.currentSeconds += 1
|
|
|
|
|
- }, 1000)
|
|
|
|
|
|
|
+ this.currentMillis += step
|
|
|
|
|
+ }, step)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
// 初始化时启动计时(对应 Vue3 的 setup 初始化逻辑)
|
|
// 初始化时启动计时(对应 Vue3 的 setup 初始化逻辑)
|
|
@@ -74,4 +79,4 @@ export default {
|
|
|
color: #ff0000;
|
|
color: #ff0000;
|
|
|
letter-spacing: 2px;
|
|
letter-spacing: 2px;
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|