index.vue 1023 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <div class="p-4">
  3. <Alert message="国际化方式,没有进行全局国际化,有需要可以自行处理。" type="info" />
  4. <Divider />
  5. 国际化信息: {{ t('hello') }}
  6. <Divider />
  7. <a-button :type="localeRef === 'zhCN' ? 'primary' : 'default'" @click="localeRef = 'zhCN'">
  8. 中文
  9. </a-button>
  10. <a-button :type="localeRef === 'en' ? 'primary' : 'default'" @click="localeRef = 'en'">
  11. 英文
  12. </a-button>
  13. <Divider />
  14. </div>
  15. </template>
  16. <script lang="ts">
  17. import { defineComponent } from 'vue';
  18. import { Alert, Divider } from 'ant-design-vue';
  19. import { useI18n } from '/@/hooks/web/useI18n';
  20. export default defineComponent({
  21. components: { Alert, Divider },
  22. setup() {
  23. const { t, localeRef } = useI18n({
  24. locale: 'zhCN',
  25. messages: {
  26. en: {
  27. hello: 'hello',
  28. },
  29. zhCN: {
  30. hello: '你好',
  31. },
  32. },
  33. });
  34. return { localeRef, t };
  35. },
  36. });
  37. </script>