vue获取一个时间段的时间差和时间差格式

<template>
  <div>
    <div>
      <p>开始时间：{{ state.stm }}</p>
      <p>结束时间：{{ state.etm }}</p>
      <p>相差（数字格式）：{{state.ztime.timeList.join(':')}}</p>
      <p>相差（中文格式）：{{state.ztime.timeName}}</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import dayjs from 'dayjs';

/**
 * 秒转换时分秒格式
 * @param {*} e 分钟数
 * @returns 
 */
const getMinuteToFormat = (e) =>{
  let tname = ''//中文格式
  let h = Math.floor(e / (60 * 60))//时
  let m = Math.floor((e - (h * 60 *60)) / 60)//分
  let s = Math.floor(e % 60)//秒
  
  // 如果是个位数，自动补0
  h = h>9 ?h :'0'+h
  m = m>9 ?m :'0'+m
  s = s>9 ?s :'0'+s
  
  if(h>0){ tname += h + '时' }
  if(m>0){ tname += m + '分' }
  if(s>0){ tname += s + '秒' }

  return {
      mTotal: e,//总秒数
      timeList: [h, m, s],//['01', '02', '03']
      timeName: tname,//01时02分03秒
  }
}

const state = reactive({
  stm: '2024-08-13 10:00:00',
  etm: '2024-08-13 11:00:03',
  ztime: {
    timeList: [],
    timeName: ''
  }
})

onMounted(()=>{
  // 获取一个时间段的相差毫秒数
  const cha = dayjs(state.etm).diff(state.stm) //获取相差毫秒数

  state.ztime = getMinuteToFormat(cha/1000)

})
</script>