openbmc-web7:head栏增加语言切换

2023-11-11 22:10

本文主要是介绍openbmc-web7:head栏增加语言切换,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

webui-vue官方是默认在登录之后不支持语言切换功能,如果想更改语言必须退出登录,然后再登录界面选择新的语言,重新登录后方可。在实际使用中显得很不友好,实际使用中肯定是希望在登录后也可以随意切换任何支持的语言。本文将以较小的改动实现这种登录后切换语言的操作,详细请看下文。

增加语言请参考openbmc-web3:添加语言:

1 head栏添加语言切换功能

1.1 功能实现过程

head栏有四个按钮,前两个“健康状态”和“电源状态”是跳转按钮,第三个是“刷新按钮”,第四个用户按钮,下拉选项。

在这里插入图片描述

实现语言切换功能,即下拉语言列表,点击对应的语言实现切换功能。

修改src/components/AppHeader/AppHeader.vue文件

在“app-header-user”前面增加一个语言切换按钮,具体html内容如下:

        <li class="nav-item"><b-dropdownid="app-header-language"rightdata-test-id="appHeader-container-language"><template #button-content><span class="responsive-text">{{ currentLangue }}</span></template><template v-for="language in languages"><b-dropdown-item-button :key="language"data-test-id="appHeader-link-profile"@click="changeLangue(language)">{{ language.text }}</b-dropdown-item-button></template></b-dropdown></li>

在这里插入图片描述

{{ currentLangue }} 变量动态显示当前语言

使用v-for创建languages数组中包含的item对象,这里使用b-dropdown-item-button组件创建

changeLangue(language) 指定点击item的函数,传入参数是对应的ietm:language(用来更新语言)

languages数组,在data中创建该数组,用于初始化languages数组(参见Login.vue创建):

    languages: [{value: 'en-US',text: 'English',},{value: 'zh-CN',text: 'Chinese',},{value: 'es',text: 'Español',},{value: 'ru-RU',text: 'Русский',},],

value对应的是语言文件的名称(zh-CN.json)。

text是对应语言名。

currentLangue()计算属性,在computed中增加该计算属性,依据this.$i18n.locale值从languages中匹配text,并显示当前语言:

currentLangue() {return this.languages.find(item=>item.value===this.$i18n.locale).text;},

在这里插入图片描述

changeLangue(language)函数,在method中添加该函数用于更新this.$i18n.locale的值:

changeLangue(language) {this.$i18n.locale = language.value;}

在这里插入图片描述

1.2 功能实现演示

通过上述修改编译后,可以在head栏看到语言的下拉列表,点击后可实现语言切换。

在这里插入图片描述
动态演示:
在这里插入图片描述
发现导航栏没有跟随变化,查看导航栏VUE代码,发现只渲染一次,并没有实现动态更新。
在这里插入图片描述

2 导航栏添加语言切换功能

2.1 功能实现过程

修改src/components/AppHeader/AppHeader.vue文件:

在该文件的method中的changeLangue(language)函数,增加导航栏刷新信号,用来通知导航栏刷新:

changeLangue(language) {this.$i18n.locale = language.value;this.$emit('refreshNav');}

在这里插入图片描述

修改src/layouts/AppLayout.vue文件:

将该文件中的内容换成如下内容:

<div class="app-container&#

这篇关于openbmc-web7:head栏增加语言切换的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/393139

相关文章

Go语言中使用JWT进行身份验证的几种方式

《Go语言中使用JWT进行身份验证的几种方式》本文主要介绍了Go语言中使用JWT进行身份验证的几种方式,包括dgrijalva/jwt-go、golang-jwt/jwt、lestrrat-go/jw... 目录简介1. github.com/dgrijalva/jwt-go安装:使用示例:解释:2. gi

SpringBoot实现多环境配置文件切换

《SpringBoot实现多环境配置文件切换》这篇文章主要为大家详细介绍了如何使用SpringBoot实现多环境配置文件切换功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 示例代码结构2. pom文件3. application文件4. application-dev文

Go 语言中的 Struct Tag 的用法详解

《Go语言中的StructTag的用法详解》在Go语言中,结构体字段标签(StructTag)是一种用于给字段添加元信息(metadata)的机制,常用于序列化(如JSON、XML)、ORM映... 目录一、结构体标签的基本语法二、json:"token"的具体含义三、常见的标签格式变体四、使用示例五、使用

Go语言使用slices包轻松实现排序功能

《Go语言使用slices包轻松实现排序功能》在Go语言开发中,对数据进行排序是常见的需求,Go1.18版本引入的slices包提供了简洁高效的排序解决方案,支持内置类型和用户自定义类型的排序操作,本... 目录一、内置类型排序:字符串与整数的应用1. 字符串切片排序2. 整数切片排序二、检查切片排序状态:

CentOS7增加Swap空间的两种方法

《CentOS7增加Swap空间的两种方法》当服务器物理内存不足时,增加Swap空间可以作为虚拟内存使用,帮助系统处理内存压力,本文给大家介绍了CentOS7增加Swap空间的两种方法:创建新的Swa... 目录在Centos 7上增加Swap空间的方法方法一:创建新的Swap文件(推荐)方法二:调整Sww

基于Go语言实现Base62编码的三种方式以及对比分析

《基于Go语言实现Base62编码的三种方式以及对比分析》Base62编码是一种在字符编码中使用62个字符的编码方式,在计算机科学中,,Go语言是一种静态类型、编译型语言,它由Google开发并开源,... 目录一、标准库现状与解决方案1. 标准库对比表2. 解决方案完整实现代码(含边界处理)二、关键实现细

如何合理管控Java语言的异常

《如何合理管控Java语言的异常》:本文主要介绍如何合理管控Java语言的异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、Thorwable类3、Error4、Exception类4.1、检查异常4.2、运行时异常5、处理方式5.1. 捕获异常

C语言中的常见进制转换详解(从二进制到十六进制)

《C语言中的常见进制转换详解(从二进制到十六进制)》进制转换是计算机编程中的一个常见任务,特别是在处理低级别的数据操作时,C语言作为一门底层编程语言,在进制转换方面提供了灵活的操作方式,今天,我们将深... 目录1、进制基础2、C语言中的进制转换2.1 从十进制转换为其他进制十进制转二进制十进制转八进制十进

$在R语言中的作用示例小结

《$在R语言中的作用示例小结》在R语言中,$是一个非常重要的操作符,主要用于访问对象的成员或组件,它的用途非常广泛,不仅限于数据框(dataframe),还可以用于列表(list)、环境(enviro... 目录1. 访问数据框(data frame)中的列2. 访问列表(list)中的元素3. 访问jav

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合