Timered Counter

简体中文

English

简体中文

English

Appearance

本地化（国际化） ​

TimeredCounter 对有必要的组件提供了本地化功能。

timered-counter-number 和 timered-counter-datetime-duration 组件支持本地化，你可以通过 locale 属性来设置本地化的配置。

大多数情况下，你只需要将 locale 属性设置为 语言代码（如 en，en-US，zh，zh-CN）即可。 TimeredCounter 内部将调用 Intl API 来处理本地化。

时间间隔本地化 ​

时间间隔本地化CodeSandbox Logo
~
点击查看代码
html
<div class="text-center">
  <timered-counter-datetime-duration id="locale-datetime-duration-counter"/>
</div>
<hr />
<div class="flex gap-4">
  <div>
    <input
      class="border border-solid p-1"
      v-model="from"
      type="datetime-local"
    />
    ~
    <input
      class="border border-solid p-1"
      v-model="to"
      type="datetime-local"
    />
  </div>
  <span class="flex-auto" />
  <locale-select
    class="border border-solid p-1 appearance-auto"
    v-model="locale"
  />
</div>
js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import { inBrowser } from "vitepress";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:00:00");

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([from, to, locale], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.locale = _locale;
}
vue
<script setup>
// #region js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import { inBrowser } from "vitepress";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:00:00");

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([from, to, locale], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.locale = _locale;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-datetime-duration id="locale-datetime-duration-counter"/>
  </div>
  <hr />
  <div class="flex gap-4">
    <div>
      <input
        class="border border-solid p-1"
        v-model="from"
        type="datetime-local"
      />
      ~
      <input
        class="border border-solid p-1"
        v-model="to"
        type="datetime-local"
      />
    </div>
    <span class="flex-auto" />
    <locale-select
      class="border border-solid p-1 appearance-auto"
      v-model="locale"
    />
  </div>
  <!-- #endregion html -->
</template>

<style scoped></style>
vue
<script setup>
const value = defineModel("modelValue");
</script>

<template>
  <select class="border border-solid p-1 appearance-auto" v-model="value">
    <optgroup label="中文">
      <option value="zh-CN">zh-CN</option>
      <option value="zh-HK">zh-HK</option>
      <option value="zh-TW">zh-TW</option>
    </optgroup>
    <optgroup label="English">
      <option value="en-US">en-US</option>
      <option value="en-GB">en-GB</option>
    </optgroup>
    <option value="ja-JP">ja-JP</option>
    <option value="ko-KR">ko-KR</option>
    <option value="de-DE">de-DE</option>
    <option value="fr-FR">fr-FR</option>
  </select>
</template>

<style scoped></style>

数字本地化 ​

特别的，timered-counter-number 组件还需要设置 locale-number 属性。

数字本地化CodeSandbox Logo
点击查看代码
html
<div class="text-center">
  <timered-counter-number id="locale-number-counter" locale-number />
</div>
<hr />
<div class="flex gap-4">
  <input class="border border-solid p-1" v-model="number" type="number" />
  <span class="flex-auto" />
  <locale-select
    class="border border-solid p-1 appearance-auto"
    v-model="locale"
  />
</div>
js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import {inBrowser} from "vitepress";

const number = ref(114514);

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([number, locale], update, { immediate: true }));
function update() {
  const _number = number.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-number-counter');
  counter.value = _number;
  counter.locale = _locale;
}
vue
<script setup>
// #region js
import {onMounted, ref, watch} from "vue";
import LocaleSelect from "./LocaleSelect.vue";
import {inBrowser} from "vitepress";

const number = ref(114514);

const locale = ref('en-US');
if (inBrowser) {
  locale.value = navigator.language;
}

onMounted(() => watch([number, locale], update, { immediate: true }));
function update() {
  const _number = number.value;
  const _locale = locale.value;

  const counter = document.getElementById('locale-number-counter');
  counter.value = _number;
  counter.locale = _locale;
}
// #endregion js
</script>

<template>
  <!-- #region html -->
  <div class="text-center">
    <timered-counter-number id="locale-number-counter" locale-number />
  </div>
  <hr />
  <div class="flex gap-4">
    <input class="border border-solid p-1" v-model="number" type="number" />
    <span class="flex-auto" />
    <locale-select
      class="border border-solid p-1 appearance-auto"
      v-model="locale"
    />
  </div>
  <!-- #endregion html -->
</template>

<style scoped></style>
vue
<script setup>
const value = defineModel("modelValue");
</script>

<template>
  <select class="border border-solid p-1 appearance-auto" v-model="value">
    <optgroup label="中文">
      <option value="zh-CN">zh-CN</option>
      <option value="zh-HK">zh-HK</option>
      <option value="zh-TW">zh-TW</option>
    </optgroup>
    <optgroup label="English">
      <option value="en-US">en-US</option>
      <option value="en-GB">en-GB</option>
    </optgroup>
    <option value="ja-JP">ja-JP</option>
    <option value="ko-KR">ko-KR</option>
    <option value="de-DE">de-DE</option>
    <option value="fr-FR">fr-FR</option>
  </select>
</template>

<style scoped></style>