多维表格
 
 
 
 
 
 

136 lines
3.0 KiB

<template>
<div>
<v-menu bottom offset-y>
<template #activator="{on}">
<v-icon size="20" class="ml-2 nc-menu-translate" v-on="on">
mdi-translate
</v-icon>
</template>
<v-list dense class="nc-language-list">
<v-list-item-group
v-model="language"
>
<v-list-item
v-for="lan in languages"
:key="lan.value"
dense
:value="lan"
color="primary"
@click="changeLan(lan)"
>
<v-list-item-subtitle class="text-capitalize">
{{ labels[lan] || lan }}
</v-list-item-subtitle>
</v-list-item>
</v-list-item-group>
<v-divider />
<v-list-item>
<a href="https://github.com/nocodb/nocodb/tree/master/packages/nc-gui/lang" target="_blank" class="caption">
<!--Help translate-->
{{ $t('activity.translate') }}
</a>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
const order = l => ({ zh_CN: 10, en: 11, id: -2 })[l] || 0
export default {
name: 'Language',
data: () => ({
labels: {
de: 'Deutsch',
en: 'English',
es: 'Español',
fa: 'فارسی',
fr: 'Français',
id: 'Bahasa Indonesia',
it_IT: 'Italiano',
ja: '日本語',
ko: '한국인',
lv: 'Latviešu',
nl: 'Nederlandse',
ru: 'Pусский',
zh_CN: '大陆简体',
zh_HK: '香港繁體',
zh_TW: '臺灣正體',
sv: 'Svenska',
da: 'Dansk',
vi: 'Tiếng Việt',
no: 'Norsk',
iw: 'עִברִית',
fi: 'Suomalainen',
uk: 'Українська',
hr: 'Hrvatski',
th: 'ไทย',
sl: 'Slovenščina',
pt_BR: 'Português (Brasil)'
}
}),
computed: {
languages() {
return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
},
language: {
get() {
return this.$store.state.windows.language
},
set(val) {
this.$store.commit('windows/MutLanguage', val)
}
}
},
methods: {
changeLan(lan) {
this.language = lan
const count = 200
const defaults = {
origin: { y: 0.7 }
}
function fire(particleRatio, opts) {
window.confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}))
}
fire(0.25, {
spread: 26,
startVelocity: 55
})
fire(0.2, {
spread: 60
})
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
})
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
})
fire(0.1, {
spread: 120,
startVelocity: 45
})
}
}
}
</script>
<style scoped lang="scss">
::v-deep {
.nc-language-list {
max-height: 90vh;
overflow: auto;
.v-list-item{
min-height: 30px !important;
}
}
}
</style>