You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<el-select
|
|
class="i18n-wrap"
|
|
v-model="currentLang"
|
|
@change="changeLang"
|
|
popper-class="i18n-popper"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in langData"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="index"
|
|
></el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const { locale } = useI18n();
|
|
|
|
const langData = reactive([
|
|
{ value: "zhCN", label: "中文(简体)" },
|
|
{ value: "zhTW", label: "中文(繁體)" },
|
|
{ value: "enUS", label: "English" },
|
|
]);
|
|
|
|
const currentLang = ref(localStorage.getItem("lang") || "zhCN");
|
|
|
|
const changeLang = (lang) => {
|
|
currentLang.value = lang;
|
|
locale.value = lang;
|
|
};
|
|
</script>
|
|
<style>
|
|
.i18n-popper {
|
|
--el-color-primary: #2b7afa;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.i18n-wrap {
|
|
:deep(.el-select__wrapper) {
|
|
box-shadow: none;
|
|
padding: 5px 8px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 9999px;
|
|
border: 1px solid #ffffff;
|
|
outline: none;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
color: #1d2129;
|
|
.el-select__selected-item.el-select__placeholder {
|
|
position: relative;
|
|
transform: translateY(0);
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|