aluminium-trading-uniapp-240925/components/base/changeLanguage.vue

<template>
	<view class="change-language">
		<uv-picker ref="picker"
		:columns="languageList"
		keyName="name"
		:itemHeight="70"
		@confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		props : {
			url : {
				default : '/pages/index/index',
				type : String,
			}
		},
		data(){
			return {
				languageList: [
					[
						{
							name:'简体中文',
							key : "zh-Hans"
						},
						{
							name:'English',
							key : "en"
						},
					]
				],
			}
		},
		methods : {
			open() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.changeLanguage(e.value.pop())
			},
			//修改当前语言
			changeLanguage(res){
				
				//#ifdef  H5
				this.$router.go(0); //刷新页面，不然validate.js不好国际化
				//#endif
				
				//#ifdef  APP-PLUS
				uni.navigateTo({
					url: this.url // 要刷新的页面路径
				});
				//#endif
				
				if(!res.key){
					return
				}
				
				uni.setStorage({
					key: 'language',
					data: res.key
				})
				
				this.$i18n.locale = res.key
				uni.setLocale(res.key) //切换语言环境必须在this.$i18n.locale之后，否则app端会有意想不到的bug
				
				uni.$responseMessage = this.$t('responseMessage')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-language{
		position: relative;
		z-index: 999999999;
	}
</style>