gypsy-crm-frontend-vu/components/cwg-language.vue

<template>
  <view class="cwg-language">
    <cwg-dropdown :menu-list="customMenuList" @menuClick="handleMenuClick" showActive :activeKey="lang">
      <view class="pc-header-btn">
        <cwg-icon name="cwg-lang" :color="iconColor " :size="20" />
      </view>
    </cwg-dropdown>
  </view>

</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { localesList, switchAppLanguage } from '@/locale/index'
import { lang } from '@/composables/config'

const props = defineProps({
  iconColor: {
    type: String,
    default: '#97A1C0'
  },
})

const { t, locale } = useI18n()
const customMenuList = computed(() =>
  localesList.map((code) => ({
    label: t(`language.${code}`),
    type: code
  })),
)

function handleMenuClick({ value }: { value: any }) {
  const type = value?.type ?? value
  switchAppLanguage(type, { locale, lang })
}

function getFlagSrc(code: string) {
  switch (code) {
    case 'en':
      return '/static/flag-en.png'
    case 'cn':
      return '/static/flag-cn.png'
    case 'zhHant':
      return '/static/flag-zhHant.png'
    case 'es':
      return '/static/flag-es.png'
    default:
      return '/static/flag-en.png'
  }
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.pc-header-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: px2rpx(6);
}
.cwg-language {
  @media screen and (max-width: 991px) {
    :deep(.cwg-dropdown-menu-container) {
      right: px2rpx(-20) !important;
    }
  }
}


:deep(.cwg-dropdown-menu-container .menu .menu-item) {
  min-height: px2rpx(36);
}

:deep(.cwg-dropdown) {
  overflow: visible !important;
}
</style>