Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 3.6 KiB |
@ -1,88 +1,90 @@ |
|||||
<template> |
<template> |
||||
<div class="container"> |
<div class="container"> |
||||
<div class="nav"> |
<div class="nav"> |
||||
<ul> |
<ul> |
||||
<li |
<li |
||||
v-for="(item, index) in items" |
v-for="(item, index) in items" |
||||
:key="index" |
:key="index" |
||||
@click="selectItem(index)" |
@click="selectItem(index)" |
||||
:class="{ active: index === activeIndex }" |
:class="{ active: index === activeIndex }" |
||||
> |
> |
||||
{{ item }} |
{{ item }} |
||||
</li> |
</li> |
||||
</ul> |
</ul> |
||||
</div> |
</div> |
||||
<div class="setting"> |
<div class="setting"> |
||||
<div v-if="0 === activeIndex"> |
<div v-if="0 === activeIndex"> |
||||
<div class="setting-item"> |
<div class="setting-item"> |
||||
<h1 class="setting-title">{{ t("language") }}</h1> |
<h1 class="setting-title">{{ t("language") }}</h1> |
||||
</div> |
</div> |
||||
<div class="setting-item"> |
<div class="setting-item"> |
||||
<label></label> |
<label></label> |
||||
<el-select v-model="modelvalue"> |
<el-select v-model="modelvalue"> |
||||
<el-option |
<el-option |
||||
v-for="(item, key) in langList" |
v-for="(item, key) in langList" |
||||
:key="key" |
:key="key" |
||||
:label="item.label" |
:label="item.label" |
||||
:value="item.value" |
:value="item.value" |
||||
/> |
/> |
||||
</el-select> |
</el-select> |
||||
</div> |
</div> |
||||
|
|
||||
<div class="setting-item"> |
<div class="setting-item"> |
||||
<label></label> |
<label></label> |
||||
<el-button @click="submit" type="primary"> |
<el-button |
||||
{{ t("confirm") }} |
@click="submit" |
||||
</el-button> |
type="primary" |
||||
</div> |
> |
||||
</div> |
{{ t("confirm") }} |
||||
</div> |
</el-button> |
||||
</div> |
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { ref } from "vue"; |
import { getLang, setLang, t } from "@/i18n"; |
||||
import { ElMessageBox } from 'element-plus' |
import { ElMessageBox } from "element-plus"; |
||||
import { t, getLang, setLang } from "@/i18n"; |
import { ref } from "vue"; |
||||
import { useI18n } from 'vue-i18n'; |
import { useI18n } from "vue-i18n"; |
||||
const { locale } = useI18n() |
const { locale } = useI18n(); |
||||
const showDialog = ref(false); |
// const showDialog = ref(false); |
||||
const langList = [ |
const langList = [ |
||||
{ |
{ |
||||
label: "中文", |
label: "中文", |
||||
value: "zh-cn", |
value: "zh-cn", |
||||
}, |
}, |
||||
{ |
{ |
||||
label: "English", |
label: "English", |
||||
value: "en", |
value: "en", |
||||
}, |
}, |
||||
]; |
]; |
||||
const items = [t("language")]; |
const items = [t("language")]; |
||||
|
|
||||
const activeIndex = ref(0); |
const activeIndex = ref(0); |
||||
const currentLang = getLang(); |
const currentLang = getLang(); |
||||
const modelvalue = ref(currentLang); |
const modelvalue = ref(currentLang); |
||||
|
|
||||
const selectItem = (index: number) => { |
const selectItem = (index: number) => { |
||||
activeIndex.value = index; |
activeIndex.value = index; |
||||
}; |
}; |
||||
|
|
||||
async function submit() { |
async function submit() { |
||||
setLang(modelvalue.value); |
setLang(modelvalue.value); |
||||
locale.value = modelvalue.value; |
locale.value = modelvalue.value; |
||||
ElMessageBox.alert(t("save.success"), t("language"), { |
ElMessageBox.alert(t("save.success"), t("language"), { |
||||
confirmButtonText: 'OK', |
confirmButtonText: "OK", |
||||
}) |
}); |
||||
//showDialog.value = false |
//showDialog.value = false |
||||
|
|
||||
// Dialog.showMessageBox({ |
// Dialog.showMessageBox({ |
||||
// message: t("save.success"), |
// message: t("save.success"), |
||||
// title: t("language"), |
// title: t("language"), |
||||
// type: "info", |
// type: "info", |
||||
// }); |
// }); |
||||
} |
} |
||||
</script> |
</script> |
||||
<style scoped> |
<style scoped> |
||||
@import "./setStyle.css"; |
@import "./setStyle.css"; |
||||
</style> |
</style> |
||||
|