92 lines
1.6 KiB
Vue
92 lines
1.6 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-app-bar
|
|
app
|
|
clipped-left
|
|
color="primary"
|
|
dark
|
|
>
|
|
<v-spacer />
|
|
<v-toolbar-title>{{ $t('common.app.title') }}</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-select
|
|
v-model="selectedLocale"
|
|
class="ma-0 mr-4"
|
|
dense
|
|
hide-details
|
|
outlined
|
|
:items="localeItems"
|
|
item-text="text"
|
|
item-value="value"
|
|
style="max-width: 150px"
|
|
/>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<router-view />
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AppRoot',
|
|
data() {
|
|
return {
|
|
selectedLocale: null
|
|
}
|
|
},
|
|
computed: {
|
|
localeItems() {
|
|
return [
|
|
{ value: 'ko', text: this.$t('common.lang.ko') },
|
|
{ value: 'en', text: this.$t('common.lang.en') },
|
|
{ value: 'ja', text: this.$t('common.lang.ja') }
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
selectedLocale(v) {
|
|
if (!v) return
|
|
this.$i18n.locale = v
|
|
try { localStorage.setItem('locale', v) } catch (e) { /* ignore */ }
|
|
}
|
|
},
|
|
created() {
|
|
this.selectedLocale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : 'ko'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
#nav {
|
|
padding: 30px;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
|
|
&.router-link-exact-active {
|
|
color: #42b983;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noscroll {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.noscroll::-webkit-scrollbar {
|
|
overflow-y: hidden;
|
|
display: none;
|
|
}
|
|
</style>
|