index.vue 905 B

1234567891011121314151617181920212223242526272829303132
  1. <script setup>
  2. // 组件
  3. import { useI18n } from 'vue-i18n'
  4. import { useAppStore } from '@/store/modules/app'
  5. const appStore = useAppStore()
  6. const { locale } = useI18n()
  7. function handleLanguageChange(lang) {
  8. locale.value = lang
  9. appStore.changeLanguage(lang)
  10. if (lang === 'en-us') {
  11. ElMessage.success('Switch Language Successful!')
  12. } else {
  13. ElMessage.success('切换语言成功!')
  14. }
  15. }
  16. </script>
  17. <template>
  18. <el-dropdown trigger="click" @command="handleLanguageChange">
  19. <div>
  20. <SvgIcon icon-class="language"></SvgIcon>
  21. </div>
  22. <template #dropdown>
  23. <el-dropdown-menu>
  24. <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn">中文</el-dropdown-item>
  25. <el-dropdown-item :disabled="appStore.language === 'en-us'" command="en-us"> English</el-dropdown-item>
  26. </el-dropdown-menu>
  27. </template>
  28. </el-dropdown>
  29. </template>