idea springboot java代码中是i18n国际化的key,怎么让鼠标移上去的时候显示对应的国际化
时间: 2024-05-16 11:19:46 浏览: 10
在 IDEA 中可以使用插件来实现鼠标悬停时显示对应的国际化信息。其中比较常用的插件是“Translation”和“Translation Helper”。这两个插件都可以在代码中自动识别国际化 key,并在悬停时显示对应的国际化信息。
使用方法如下:
1. 打开 IDEA,并进入插件市场搜索“Translation”或“Translation Helper”插件,安装并重启 IDEA。
2. 在代码中使用 i18n 国际化 key,如下所示:
```
String msg = messageSource.getMessage("welcome.message", null, Locale.getDefault());
```
3. 将鼠标悬停在国际化 key 上,即可在悬浮窗口中看到对应的国际化信息。
![translation_helper.png](https://cdn.jsdelivr.net/gh/1071496916/CDN/blog/20210916170833.png)
![translation.png](https://cdn.jsdelivr.net/gh/1071496916/CDN/blog/20210916170834.png)
需要注意的是,在使用这些插件之前,需要在项目中配置好对应的国际化文件,以及指定默认的 locale。
相关问题
idea springboot工程 如何鼠标移上去显示 i18n国际化的内容
在 Spring Boot 工程中,要实现鼠标移上去显示 i18n 国际化的内容,可以采用以下步骤:
1. 在 Spring Boot 工程中添加支持 i18n 的相关依赖,如 `spring-boot-starter-validation` 和 `spring-boot-starter-internationalization`。
2. 在 `application.properties` 或 `application.yml` 中配置 i18n 相关配置,如语言列表和资源文件位置等信息。
3. 在需要显示多语言文本的地方,使用 `MessageSource` 来获取对应语言的文本。
4. 使用 Thymeleaf 模板引擎来渲染页面,并在页面中使用 Thymeleaf 提供的 `th:attr` 属性和 `data-*` 属性来实现鼠标移入显示多语言文本的效果。
示例代码如下:
1. 配置文件
```yaml
spring:
messages:
basename: i18n/messages
```
2. 控制器
```java
@Controller
public class MyController {
@Autowired
private MessageSource messageSource;
@GetMapping("/")
public String index(Model model, Locale locale) {
String hello = messageSource.getMessage("hello", null, locale);
String world = messageSource.getMessage("world", null, locale);
model.addAttribute("hello", hello);
model.addAttribute("world", world);
return "index";
}
}
```
3. 页面
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Page</title>
<style>
.tooltip {
position: absolute;
display: none;
border: 1px solid #ccc;
background-color: #fff;
padding: 5px;
}
</style>
</head>
<body>
<h1 th:text="${hello}"></h1>
<p th:text="${world}" th:attr="data-i18n='world'"></p>
<script>
function showTooltip(event) {
var lang = thymeleafFragmentParameters.locale;
var key = event.target.getAttribute('data-i18n');
var text = /* 使用ajax异步获取对应的文本 */;
var tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = text;
document.body.appendChild(tooltip);
var x = event.pageX;
var y = event.pageY;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
event.target.addEventListener('mouseleave', function() {
document.body.removeChild(tooltip);
});
}
var elements = document.querySelectorAll('[data-i18n]');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('mouseenter', showTooltip);
}
</script>
</body>
</html>
```
在上面的示例代码中,我们在 `application.yml` 中配置了 i18n 相关配置,使用 `MessageSource` 来获取对应语言的文本,使用 Thymeleaf 模板引擎来渲染页面,并在页面中使用 Thymeleaf 提供的 `th:attr` 属性和 `data-*` 属性来实现鼠标移入显示多语言文本的效果。同时,我们使用了 JavaScript 代码来异步获取多语言文本,并在页面上添加对应的提示框。
idea 如何鼠标移上去显示 i18n国际化的内容
要实现鼠标移上去显示 i18n 国际化的内容,可以采用以下步骤:
1. 使用 i18n 库来管理多语言文本资源。
2. 在页面中需要显示多语言文本的地方,使用 i18n 提供的 API 来获取对应语言的文本。
3. 使用鼠标移入事件来触发显示多语言文本的操作。
4. 在事件处理函数中获取当前鼠标所在位置,并根据位置来确定需要显示的文本内容。
5. 使用 DOM 操作将文本内容添加到页面中,并设置样式以达到合适的显示效果。
示例代码如下:
```javascript
// 在页面加载时初始化 i18n 库
i18n.init({
lng: 'en',
resources: {
en: {
translation: {
'hello': 'Hello',
'world': 'World'
}
},
zh: {
translation: {
'hello': '你好',
'world': '世界'
}
}
}
});
// 绑定鼠标移入事件
document.getElementById('myElement').addEventListener('mouseenter', function(event) {
// 获取当前语言
var lang = i18n.lng();
// 根据语言获取对应的文本
var text = i18n.t('hello') + ' ' + i18n.t('world');
// 创建并添加文本元素
var tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = text;
document.body.appendChild(tooltip);
// 设置文本元素的位置
var x = event.pageX;
var y = event.pageY;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
});
// 绑定鼠标移出事件
document.getElementById('myElement').addEventListener('mouseleave', function(event) {
// 移除文本元素
var tooltip = document.querySelector('.tooltip');
if (tooltip) {
document.body.removeChild(tooltip);
}
});
```
在上面的示例代码中,我们使用了 i18n 库来管理多语言文本资源,使用鼠标移入事件来触发显示多语言文本的操作,使用 DOM 操作将文本内容添加到页面中,并设置样式以达到合适的显示效果。同时,我们还绑定了鼠标移出事件来移除文本元素,以保证页面干净整洁。