ali_ai_learn_web/src/components/LangSwitch.vue

<template>
  <div class="lang-switch flex-center">
    <!-- <el-button @click="switchToZh" :type="langStore.currentLang === 'zh-CN' ? 'primary' : 'text'">中文</el-button>
    <el-button @click="switchToEn" :type="langStore.currentLang === 'en' ? 'primary' : 'text'">English</el-button> -->
    <el-dropdown @command="handleClick" type="primary" round>
      <span class="el-dropdown-link">
        <el-button size="small" round>{{ langStore.currentLang === 'zh-CN' ? 'ZN' : 'EN' }}</el-button>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh-CN" v-if="langStore.currentLang !== 'zh-CN'">中文</el-dropdown-item>
          <el-dropdown-item command="en" v-if="langStore.currentLang !== 'en'">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { useLangStore } from '@/pinia/langStore'

const langStore = useLangStore()

// 点击切换语言
const handleClick = (command) => {
  if (command === 'zh-CN') {
    switchToZh()
  } else if (command === 'en') {
    switchToEn()
  }
}

// 切换到中文
const switchToZh = () => {
  langStore.changeLang('zh-CN')
}

// 切换到英文
const switchToEn = () => {
  langStore.changeLang('en')
}
</script>

<style scoped>
.lang-switch {

}
</style>