✨(page): i18n support

2022-10-22 19:09:41 +08:00 · 2022-10-22 19:09:41 +08:00 · e579bf774f
commit e579bf774f
parent e51ce78db5
12 changed files with 112 additions and 29 deletions
--- a/package/component/src/component/datePicker/components/DatePanel.vue
+++ b/package/component/src/component/datePicker/components/DatePanel.vue
@ -14,10 +14,10 @@
        >
        <div class="laydate-set-ym">
          <span @click="datePicker.showPanel.value = 'year'"
-            >{{ datePicker.currentYear.value }} 年</span
+            >{{ datePicker.currentYear.value }} {{ t('datePicker.year') }}</span
          >
          <span @click="datePicker.showPanel.value = 'month'"
-            >{{ datePicker.currentMonth.value + 1 }} 月</span
+            >{{ datePicker.currentMonth.value + 1 }} {{ t('datePicker.month') }}</span
          >
        </div>
        <i
@ -42,7 +42,7 @@
          v-if="datePicker.type === 'datetime'"
          @click="datePicker.showPanel.value = 'time'"
          class="laydate-btns-time"
-          >选择时间</span
+          >{{ t('datePicker.selectTime')}}</span
        >
      </PanelFoot>
    </div>
@ -60,10 +60,13 @@ import { setDateList } from "../day";
 import PanelFoot from "./PanelFoot.vue";
 import DateContent from "./components/DateContent.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";

 export interface TimePanelProps {
  modelValue: number;
 }
+
+const { t } = useI18n();
 const props = withDefaults(defineProps<TimePanelProps>(), {});
 const emits = defineEmits(["update:modelValue", "ok"]);
 const Day = ref(props.modelValue);
--- a/package/component/src/component/datePicker/components/DateRange.vue
+++ b/package/component/src/component/datePicker/components/DateRange.vue
@ -19,7 +19,7 @@
          <div class="laydate-set-ym">
            <lay-dropdown ref="dropdownYearPanelRefLeft">
              <span class="laydate-range-time"
-                >{{ startTime.year || "--" }}年</span
+                >{{ startTime.year || "--" }} {{ t('datePicker.year') }}</span
              >
              <template #content>
                <YearPanel
@ -31,7 +31,7 @@
            </lay-dropdown>
            <lay-dropdown ref="dropdownMonthPanelRefLeft">
              <span class="laydate-range-time"
-                >{{ startTime.month + 1 }}月</span
+                >{{ startTime.month + 1 }} {{ t('datePicker.month') }}</span
              >
              <template #content>
                <MonthPanel
@ -75,7 +75,7 @@
        <div class="layui-laydate-header">
          <div class="laydate-set-ym">
            <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time">{{ startTime.year }}年</span>
+              <span class="laydate-range-time">{{ startTime.year }} {{ t('datePicker.year') }}</span>
              <template #content>
                <YearPanel
                  class="time-panel"
@ -90,7 +90,7 @@
                  startTime.month + 2 > 12
                    ? startTime.month - 10
                    : startTime.month + 2
-                }}月</span
+                }}  {{ t('datePicker.month') }}</span
              >
              <template #content>
                <MonthPanel
@ -186,6 +186,7 @@ import TimePanel from "./TimePanel.vue";
 import YearPanel from "./YearPanel.vue";
 import MonthPanel from "./MonthPanel.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 export interface DateRangeProps {
  startTime: string;
  endTime: string;
@ -198,6 +199,8 @@ const emits = defineEmits([
 ]);
 const datePicker: provideType = inject("datePicker") as provideType;

+const { t } = useI18n(); 
+
 const prevDateList = ref<any>([]);
 const nextDateList = ref<any>([]);
 const startTime = reactive({
--- a/package/component/src/component/datePicker/components/MonthPanel.vue
+++ b/package/component/src/component/datePicker/components/MonthPanel.vue
@ -4,7 +4,7 @@
      <div class="layui-laydate-header">
        <div class="laydate-set-ym">
          <span @click="datePicker.showPanel.value = 'month'">{{
-            typeof Month !== "string" ? Month + 1 + " 月" : "请选择月份"
+            typeof Month !== "string" ? Month + 1 + t('datePicker.month') : t('datePicker.selectMonth')
          }}</span>
        </div>
      </div>
@ -26,7 +26,7 @@
        v-if="datePicker.type === 'yearmonth'"
        @click="datePicker.showPanel.value = 'year'"
        class="laydate-btns-time"
-        >选择年份</span
+        >{{ t('datePicker.selectYear') }}</span
      >
    </PanelFoot>
  </div>
@ -38,6 +38,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 import { inject, ref, watch } from "vue";
 import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
@ -52,6 +53,7 @@ const props = withDefaults(defineProps<TimePanelProps>(), {
 const emits = defineEmits(["update:modelValue", "ok"]);
 const datePicker: provideType = inject("datePicker") as provideType;
 const Month = ref(props.modelValue);
+const { t } = useI18n();

 const MONTH_NAME = [
  "1月",
--- a/package/component/src/component/datePicker/components/MonthRange.vue
+++ b/package/component/src/component/datePicker/components/MonthRange.vue
@ -11,7 +11,7 @@
          <div class="laydate-set-ym">
            <lay-dropdown ref="dropdownYearPanelRefLeft">
              <span class="laydate-range-time"
-                >{{ startTime.year || "--" }}年</span
+                >{{ startTime.year || "--" }} {{ t('datePicker.year') }}</span
              >
              <template #content>
                <YearPanel
@ -49,7 +49,7 @@
        <div class="layui-laydate-header">
          <div class="laydate-set-ym">
            <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time">{{ startTime.year + 1 }}年</span>
+              <span class="laydate-range-time">{{ startTime.year + 1 }} {{ t('datePicker.year') }}</span>
              <template #content>
                <YearPanel
                  class="time-panel"
@ -111,16 +111,23 @@ import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
 import YearPanel from "./YearPanel.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
+
 export interface DateRangeProps {
  startTime: string;
  endTime: string;
 }
+
 const props = withDefaults(defineProps<DateRangeProps>(), {});
+
 const emits = defineEmits([
  "update:modelValue",
  "update:startTime",
  "update:endTime",
 ]);
+
+const { t } = useI18n();
+
 const datePicker: provideType = inject("datePicker") as provideType;

 const startTime = reactive({
--- a/package/component/src/component/datePicker/components/PanelFoot.vue
+++ b/package/component/src/component/datePicker/components/PanelFoot.vue
@ -3,13 +3,13 @@
    <slot></slot>
    <div class="laydate-footer-btns">
      <span lay-type="clear" class="laydate-btns-clear" @click="handelClear"
-        >清空</span
+        >{{ t('datePicker.clear')}}</span
      >
      <span lay-type="now" class="laydate-btns-now" @click="handelNow"
-        >现在</span
+        >{{ t('datePicker.now')}}</span
      >
      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk"
-        >确定</span
+        >{{ t('datePicker.confirm')}}</span
      >
    </div>
  </div>
@ -20,7 +20,11 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-//foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
+import { useI18n } from '../../../language';
+
+
+const { t } = useI18n();
+
 const emits = defineEmits(["ok", "clear", "now"]);

 const handelOk = () => {
--- a/package/component/src/component/datePicker/components/TimePanel.vue
+++ b/package/component/src/component/datePicker/components/TimePanel.vue
@ -3,7 +3,7 @@
    <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
      <div class="layui-laydate-header">
        <div class="laydate-set-ym">
-          <span class="laydate-time-text">选择时间</span>
+          <span class="laydate-time-text">{{t('datePicker.selectTime')}}</span>
        </div>
      </div>
      <div class="layui-laydate-content" style="height: 210px">
@ -35,7 +35,7 @@
        v-if="datePicker.type === 'datetime' && !datePicker.range"
        @click="datePicker.showPanel.value = 'datetime'"
        class="laydate-btns-time"
-        >选择日期</span
+        >{{t('datePicker.selectDate')}}</span
      >
      <template v-else-if="!isNaN(hms.hh) && !isNaN(hms.mm) && !isNaN(hms.ss)">
        {{
@ -52,7 +52,8 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { inject, onMounted, ref, Ref, nextTick, watch, h } from "vue";
+import { useI18n } from "../../../language";
+import { inject, onMounted, ref, nextTick, watch } from "vue";
 import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
 export interface hmsType {
@ -68,6 +69,8 @@ export interface TimePanelProps {
 const props = withDefaults(defineProps<TimePanelProps>(), {});
 const emits = defineEmits(["update:modelValue", "ok"]);
 const datePicker: provideType = inject("datePicker") as provideType;
+const { t } = useI18n();
+
 const els = [
  { count: 24, type: "hh" },
  { count: 60, type: "mm" },
--- a/package/component/src/component/datePicker/components/YearPanel.vue
+++ b/package/component/src/component/datePicker/components/YearPanel.vue
@ -3,7 +3,7 @@
    <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
      <div class="layui-laydate-header">
        <div class="laydate-set-ym">
-          <span class="laydate-time-text">选择年份</span>
+          <span class="laydate-time-text">{{t('datePicker.selectYear')}}</span>
        </div>
      </div>
    </div>
@ -28,7 +28,7 @@
        v-if="datePicker.type === 'yearmonth'"
        @click="datePicker.showPanel.value = 'month'"
        class="laydate-btns-time"
-        >选择月份</span
+        >{{t('datePicker.selectMonth')}}</span
      >
      <template v-else-if="Year > 0">{{ Year }}</template>
    </PanelFoot>
@ -41,6 +41,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 import { inject, nextTick, onMounted, ref, watch } from "vue";
 import { getYears } from "../day";
 import { provideType } from "../interface";
@ -58,6 +59,7 @@ const datePicker: provideType = inject("datePicker") as provideType;
 const yearList = ref<number[]>(getYears());
 const unWatch = ref(false);
 const Year = ref(props.modelValue);
+const { t } = useI18n();

 // 点击年份
 const handleYearClick = (item: any) => {
--- a/package/component/src/component/empty/index.vue
+++ b/package/component/src/component/empty/index.vue
@ -7,6 +7,8 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { useSlots, withDefaults } from "vue";
+import { useI18n } from "../../language";
+import { computed } from "@vue/reactivity";

 export interface EmptyProps {
  description?: string;
@ -14,10 +16,12 @@ export interface EmptyProps {
 }

 const props = withDefaults(defineProps<EmptyProps>(), {
-  description: "暂无数据",
 });

+const { t } = useI18n();
 const slots = useSlots();
+
+const description = computed(() => props.description ? props.description : t('empty.description'))
 </script>

 <template>
--- a/package/component/src/component/page/index.vue
+++ b/package/component/src/component/page/index.vue
@ -138,7 +138,7 @@ watch(
 <template>
  <div class="layui-laypage layui-laypage-default">
    <span v-if="showCount" class="layui-laypage-count"
-      >共 {{ total }} 条 {{ maxPage }} 页</span
+      >{{ t("page.total") }} {{ total }} {{ t("page.item") }} {{ maxPage }} {{ t("page.page") }}</span
    >
    <a
      href="javascript:;"
@ -150,7 +150,7 @@ watch(
      @click="prev()"
    >
      <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>{{ t("page.prev") }}</template>
+      <template v-else>{{ t("page.previous") }}</template>
    </a>
    <template v-if="showPage">
      <template v-for="index of totalPage" :key="index">
@ -187,7 +187,7 @@ watch(
    <span v-if="showLimit" class="layui-laypage-limits">
      <select v-model="inlimit" @change="changelimit">
        <option v-for="val of limits" :key="val" :value="val">
-          {{ val }} 条/页
+          {{ val }} {{ t("page.item") }}/{{ t("page.page") }}
        </option>
      </select>
    </span>
@ -200,20 +200,20 @@ watch(
      <i class="layui-icon layui-icon-refresh"></i>
    </a>
    <span v-if="props.showSkip" class="layui-laypage-skip">
-      到第
+      {{ t('page.goTo') }}
      <input
        v-model="currentPageShow"
        @keypress.enter="jumpPage()"
        type="number"
        class="layui-input layui-input-number"
-      />页
+      />{{ t("page.page") }}
      <button
        type="button"
        class="layui-laypage-btn"
        @click="jumpPage()"
        :disabled="currentPageShow > maxPage || currentPageShow == currentPage"
      >
-        确定
+        {{ t('page.confirm') }}
      </button>
    </span>
  </div>
--- a/package/component/src/language/locales/en_US.ts
+++ b/package/component/src/language/locales/en_US.ts
@ -3,7 +3,34 @@ export default {
    placeholder: "please input",
  },
  page: {
-    prev: "prev",
+    previous: "previous",
    next: "next",
+    goTo: "Go to",
+    confirm: "confirm",
+    page: "page",
+    item: "item",
+    total: "Total"
  },
+  datePicker: {
+    year: "year",
+    month: "month",
+    sunday: "SU",
+    monday: "MO",
+    tuesday: "TU",
+    wednesday: "WE",
+    thursday: "TH",
+    friday: "FR",
+    saturday: "SA",
+    selectDate: "select date",
+    selectTime: "select time",
+    selectYear: "select year",
+    selectMonth: "select month",
+    clear: "clear",
+    confirm: "confirm",
+    cancel: "cancel",
+    now: "now"
+  },
+  empty: {
+    description: "No data"
+  }
 };
--- a/package/component/src/language/locales/zh_CN.ts
+++ b/package/component/src/language/locales/zh_CN.ts
@ -3,7 +3,34 @@ export default {
    placeholder: "请输入",
  },
  page: {
-    prev: "上一页",
+    previous: "上一页",
    next: "下一页",
+    goTo: "到第",
+    confirm: "确认",
+    page: "页",
+    item: "条",
+    total: "共"
  },
+  datePicker: {
+    year: "年",
+    month: "月",
+    sunday: "日",
+    monday: "一",
+    tuesday: "二",
+    wednesday: "三",
+    thursday: "四",
+    friday: "五",
+    saturday: "六",
+    selectDate: "选择日期",
+    selectTime: "选择时间",
+    selectYear: "选择年份",
+    selectMonth: "选择月份",
+    clear: "清空",
+    confirm: "确认",
+    cancel: "取消",
+    now: "现在"
+  },
+  empty: {
+    description: "无数据"
+  }
 };
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -35,6 +35,7 @@
          <li>[删除] select 组件 show-empty 属性, 由用户自定义 select-option 代替。</li>
          <li>[删除] select 组件 empty-message 属性, 由用户自定义 select-option 代替。</li>
          <li>[删除] select 组件 placeholder, searchPlaceholder 属性默认值, 由使用者提供。</li>
+          <li>[其他] date-picker, empty, page 组件支持 i18n 国际化。</li>
          <li>[升级] vue-i18n-next 9.2.2 版本。</li>
        </ul> 
      </li>