效果图:
实现方法:
<el-countdown :time="countdownTime" :formatter="formatter" /> <div v-html="formattedTime"></div>
formatter(time) { const days = Math.floor(time / 1000 / 60 / 60 / 24); // 计算天数 const hours = Math.floor((time / 1000 / 60 / 60) % 24); // 计算小时 const minutes = Math.floor((time / 1000 / 60) % 60); // 计算分钟 const seconds = Math.floor((time / 1000) % 60); // 计算秒 // 更新 formattedTime 以便在 v-html 中使用 this.formattedTime = ` <span class="countdown-item days">${days}天</span> <span class="countdown-item hours">${String(hours).padStart(2, '0')}</span>: <span class="countdown-item minutes">${String(minutes).padStart(2, '0')}</span>: <span class="countdown-item seconds">${String(seconds).padStart(2, '0')}</span> `; return `${days}天 ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; // 返回字符串以满足 formatter 的要求 },
标签:el,const,String,padStart,60,element,countdown,time,Math From: https://www.cnblogs.com/gteman/p/18400438