<template>
|
<view>
|
<picker
|
range-key="label"
|
:range="langOptions"
|
:value="langIndex"
|
@change="handleLangChange"
|
>
|
<slot>
|
<view class="i-mdi-language" :style="langStyle" />
|
</slot>
|
</picker>
|
</view>
|
</template>
|
|
<script setup>
|
import { useI18n } from "vue-i18n"
|
|
const props = defineProps({
|
size: {
|
type: Number,
|
default: 40,
|
required: false
|
}
|
})
|
const emit = defineEmits(["change"])
|
const { locale, t } = useI18n()
|
const langStyle = {
|
fontSize: `${props.size}rpx`
|
}
|
const langOptions = computed(() => {
|
return [
|
{ label: t("locale.en"), value: "en" },
|
{ label: t("locale.zh-hans"), value: "zh-Hans" }
|
]
|
})
|
const langIndex = computed(() => {
|
return langOptions.value.findIndex(item => {
|
return item.value === locale.value
|
})
|
})
|
|
function handleLangChange(event) {
|
const lang = langOptions.value[event.detail.value].value
|
locale.value = lang
|
uni.setLocale(lang)
|
emit("change", lang)
|
}
|
|
</script>
|
|
<style lang="scss" scoped></style>
|
