如何修改vue2-flip-countdown倒计时下方文本以支持vue-i18n

vue2-flip-countdown 原生提供了时间单位标签的具名插槽，无需修改组件源码，直接结合i18n翻译API即可实现标签随语言切换自动更新。

1. 提前配置i18n语言词条 #

在项目的多语言包中添加倒计时对应的翻译字段，示例：

// zh-CN 中文包
export default {
  common: {
    countdownDays: '天',
    countdownHours: '时',
    countdownMinutes: '分',
    countdownSeconds: '秒'
  }
}

// en-US 英文包
export default {
  common: {
    countdownDays: 'Days',
    countdownHours: 'Hours',
    countdownMinutes: 'Minutes',
    countdownSeconds: 'Seconds'
  }
}

2. 使用组件时替换默认标签 #

通过组件暴露的四个具名插槽，分别插入对应i18n翻译内容即可，修改后的代码如下：

<template>
  <div>
    <flip-countdown deadline="2025-04-02 09:34:33">
      <template #day-label>{{ $t('common.countdownDays') }}</template>
      <template #hour-label>{{ $t('common.countdownHours') }}</template>
      <template #minute-label>{{ $t('common.countdownMinutes') }}</template>
      <template #second-label>{{ $t('common.countdownSeconds') }}</template>
    </flip-countdown>
  </div>
</template>

如果项目使用的Vue版本低于2.6，需要替换为旧版slot语法：<span slot="day-label">{{ $t('common.countdownDays') }}</span>，其余插槽同理。

3. 全局复用优化（可选） #

如果项目中多处用到该倒计时组件，可以二次封装为自带多语言能力的公共组件，避免重复编写插槽代码：

<!-- 封装文件 src/components/FlipCountdownI18n.vue -->
<template>
  <flip-countdown v-bind="$attrs" v-on="$listeners">
    <template #day-label>{{ $t('common.countdownDays') }}</template>
    <template #hour-label>{{ $t('common.countdownHours') }}</template>
    <template #minute-label>{{ $t('common.countdownMinutes') }}</template>
    <template #second-label>{{ $t('common.countdownSeconds') }}</template>
  </flip-countdown>
</template>

<script>
import FlipCountdown from 'vue2-flip-countdown'
export default {
  name: 'FlipCountdownI18n',
  components: { FlipCountdown }
}
</script>

封装完成后全局注册该组件，后续使用时和原生flip-countdown传参方式完全一致，无需额外处理标签即可自动跟随系统语言切换。

内容的提问来源于stack exchange，提问作者Frank R