38 布局多语言组件开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完右侧插槽成多语言组件开发
完成登录页部分多语言布局开发
image.png

开发

之前我们完成布局以后并没有开发多语言的组件，这次我们来开发一下整个的多语言的组件的部分。
首先我们在layouts目录中创建一个select-lang的文件夹，然后再创建一个index.vue的文件接下来实现一下多语言切换的功能。

<script lang="ts" setup>

</script>

<template>
  <div>
    Select Lang
  </div>
</template>

<style scoped>

</style>

首先我们需要准备一个图标，这里因为antd中并没有这个图标，所以我这里直接给大家准备了一个vue的图标，大家直接使用即可。
在select-lang目录下创建一个lang-icon.vue的文件，将如下代码复制进去，即可

<template>
  <svg width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4ZM334.83 362L368 281.65L401.17 362Zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9Z" /></svg>
</template>

然后在index.vue中引入并使用：

<script lang="ts" setup>
import LangIcon from './lang-icon.vue'
</script>

<template>
  <div>
    <LangIcon />
  </div>
</template>

接下来我们在base-layout中创建一个right-content.vue的组件引入我们的选择组件，如下：

<script lang="ts" setup>
import SelectLang from '../select-lang/index.vue'
</script>

<template>
  <div>
    <SelectLang />
  </div>
</template>

最后在base-layout/index.vue中进行添加：

<script lang="ts" setup>
</script>

<template>
  <MobileLayout
    v-if="isMobile"
    v-model:visible="visible"
    :logo="layout.logo"
    :title="layout.title"
  >
    <template #headerRight>
      <RightContent />
    </template>
    <router-view />
  </MobileLayout>
<template v-else>
  <MixLayout
    v-if="layout.layout === 'mix'"
    v-model:collapsed="layout.collapsed"
    :logo="layout.logo"
    :title="layout.title"
    :show-sider-trigger="layout.showSiderTrigger"
    :sider-width="layout.siderWidth"
    :sider-collapsed-width="layout.siderCollapsedWidth"
  >
    <template #headerRight>
      <RightContent />
    </template>
    <router-view />
  </MixLayout>
  <SideLayout
    v-if="layout.layout === 'side'"
    v-model:collapsed="layout.collapsed"
    :logo="layout.logo"
    :inverted="layout.layoutStyle === 'inverted'"
    :title="layout.title"
    :show-sider-trigger="layout.showSiderTrigger"
    :sider-width="layout.siderWidth"
    :sider-collapsed-width="layout.siderCollapsedWidth"
  >
    <template #headerRight>
      <RightContent />
    </template>
    <router-view />
  </SideLayout>
  <TopLayout
    v-if="layout.layout === 'top'"
    :logo="layout.logo"
    :title="layout.title"
    :inverted="layout.layoutStyle === 'inverted'"
  >
    <template #headerRight>
      <RightContent />
    </template>
    <router-view />
  </TopLayout>
</template>

看一下现在的效果。
实现下列菜单的效果：

<script lang="ts" setup>
import type { DropdownOption } from 'naive-ui'
import LangIcon from './lang-icon.vue'
defineProps<{
  value: string
  options: DropdownOption[]
}>()

const emit = defineEmits(['update:value'])

const handleSelect = (value: string) => {
  emit('update:value', value)
}
</script>

<template>
  <n-dropdown
    trigger="hover"
    :value="value"
    :options="options"
    @select="handleSelect"
  >
    <div class="text-18px cursor-pointer">
      <LangIcon />
    </div>
  </n-dropdown>
</template>

然后在right-content.vue中处理：

<script lang="ts" setup>
import type { DropdownOption } from 'naive-ui'
import SelectLang from '../select-lang/index.vue'
const appLocale = useAppLocale()
const options = $ref<DropdownOption[]>([
  {
    label: '简体中文',
    key: 'zh-CN',
    icon: () => '🇨🇳',
  },
  {
    label: 'English',
    key: 'en-US',
    icon: () => '🇺🇸',
  },
])
</script>

<template>
  <div>
    <SelectLang v-model:value="appLocale" :options="options" />
  </div>
</template>

尝试切换多语言

为了方便我们后面复用多语言的部分，我们将多语言的部分移到stores/app.ts中，如下：

const localeOptions = ref<DropdownOption[]>([
    {
      label: '简体中文',
      key: 'zh-CN',
      icon: () => '🇨🇳',
    },
    {
      label: 'English',
      key: 'en-US',
      icon: () => '🇺🇸',
    },
  ])

接下来我们开发一下，登录页布局部分的多语言切换的功能，我们切换到blank-layout/index.vue中：

<script lang="ts" setup>
import SelectLang from '../select-lang/index.vue'
const appLocale = useAppLocale()
const appStore = useAppStore()
</script>

<template>
  <n-el tag="div" flex="~ col" class="pro-admin-login-container h-screen">
    <div class="flex flex-shrink-0 h-48px px-24px items-center justify-end">
      <n-space>
        <SelectLang v-model:value="appLocale" :options="appStore.localeOptions" />
      </n-space>
    </div>
    <slot name="prefix" />
  </n-el>
</template>

right-content.vue中同上，测试。

⚠️ **GitHub.com Fallback** ⚠️