bug

zhangzeli

2022-01-10 9252ac63bade4c0e155b2c5a2882fdfda863ee96

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
<template>
  <div style="display: inline-block">
    <Dropdown @on-click="handleLanDropdown">
      <div class="header-right-icon header-action">
        <Icon type="md-globe" :size="20" class="language"></Icon>
      </div>
      <DropdownMenu slot="list">
        <DropdownItem name="zh-CN" :selected="currLang == 'zh-CN'"
          ><div class="lan-logo-content">
            <img src="@/assets/icon/chinese.png" class="country-logo" />简体中文
          </div></DropdownItem
        >
        <DropdownItem name="en-US" :selected="currLang == 'en-US'"
          ><div class="lan-logo-content">
            <img src="@/assets/icon/english.png" class="country-logo" />English
          </div></DropdownItem
        >
      </DropdownMenu>
    </Dropdown>
  </div>
</template>
 
<script>
export default {
  name: "language",
  props: {},
  data() {
    return {
      currLang: "zh-CN",
    };
  },
  methods: {
    handleLanDropdown(name) {
      this.currLang = name;
      this.$i18n.locale = name;
      this.$store.commit("switchLang", name);
    },
  },
  mounted() {
    if (localStorage.lang) {
      this.currLang = localStorage.lang;
    }
  },
};
</script>
 
<style lang="less" scoped>
.lan-logo-content {
  display: flex;
  align-items: center;
  .country-logo {
    width: 15px;
    margin-right: 8px;
  }
}
</style>