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 cursor-pointer" :data-tooltip="t('vu.tooltip.t101')">
        <cwg-icon name="cwg-lang" :color="iconColor " :size="20" />
        <text class="lang-text">{{ t(`language.${lang}`) }}</text>
      </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 {
  width: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: px2rpx(6);
  padding: 0 px2rpx(5);
}
.cwg-language {
  :deep(.cwg-dropdown-menu-container) {
    left: px2rpx(-40) !important;
    right: px2rpx(0) !important;
    .menu{
      max-height: 80vh;
      overflow-y: scroll;
      //scrollbar-width: thin;
      /* 强制显示滚动条并美化 */
      &::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
        display: block !important;
        /* 强制在某些webkit浏览器中显示 */
        background-color:yellow !important;
      }
      &::-webkit-scrollbar-track {
        background-color: #faf3f3;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color:#6a6a6a;
        border-radius: 4px;

        &:hover {
          background-color: #6a6a6a;
        }
      }
    }
  }
  @media screen and (max-width: 991px) {
    :deep(.cwg-dropdown-menu-container) {
      right: px2rpx(-20) !important;

    }
  }
  @media screen and (max-width: 768px) {
    :deep(.cwg-dropdown-menu-container) {
      right: px2rpx(0) !important;
    }
  }
}


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

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