1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <template>
| <div class="locale-dropdown">
| <Dropdown trigger="click" @on-click="selectLang">
| <a href="javascript:;">
| {{ title }}
| <Icon :size="18" color="#fff" type="md-arrow-dropdown"></Icon>
| </a>
| <template #list>
| <DropdownMenu>
| <DropdownItem
| v-for="(value, key) in localeList"
| :selected="key == locale"
| :name="key"
| :key="key"
| >{{ value }}</DropdownItem
| >
| </DropdownMenu>
| </template>
| </Dropdown>
| </div>
| </template>
|
| <script>
| import { useI18n } from "vue-i18n";
| import { localSave, localRead } from "@/libs/util";
| const localeKey = "locale";
| export default {
| name: "LayoutLocale",
| data() {
| return {
| lang: "",
| langList: {
| "zh-CN": "语言",
| "en-US": "Lang",
| },
| localeList: {
| "zh-CN": "中文简体",
| "en-US": "English",
| },
| };
| },
| computed: {
| title() {
| return this.langList[this.lang];
| },
| },
| methods: {
| selectLang(name) {
| this.setLocal(name);
| this.changeLang(name);
| },
| setLocal(name) {
| this.lang = name;
| localSave(localeKey, name);
| },
| },
| mounted() {
| this.lang = localRead(localeKey) || "zh-CN";
| this.selectLang(this.lang);
| },
| setup() {
| const { locale } = useI18n();
| const changeLang = (name) => {
| locale.value = name;
| };
| return { locale, changeLang };
| },
| };
| </script>
|
| <style lang="less" scoped>
| .locale-dropdown {
| margin-right: 10px;
| float: right;
| a {
| color: #fff;
| }
| }
| </style>
|
|
