java,vue实现@功能的代码展示
时间: 2023-08-28 08:32:41 浏览: 56
实现 `@` 功能的方法主要是监听输入框的输入事件,当用户输入 `@` 时,弹出一个下拉框或者模态框,显示可选用户列表,用户选择一个用户后,将其添加到输入框中。
下面是一个使用 `Java` 和 `Vue` 实现 `@` 功能的示例代码:
Java:
```java
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("")
public List<User> getUsers() {
return userService.getAllUsers();
}
@GetMapping("/{id}")
public User getUserById(@PathVariable Long id) {
return userService.getUserById(id);
}
}
```
Vue:
```vue
<template>
<div>
<label for="input">输入框:</label>
<input id="input" type="text" v-model="content" @input="handleInput"/>
<div v-if="showDropdown" class="dropdown">
<ul>
<li v-for="(user, index) in users" :key="index" @click="handleUserClick(user)">
{{ user.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
content: '',
showDropdown: false,
users: []
}
},
methods: {
handleInput() {
if (this.content.endsWith('@')) {
this.showDropdown = true;
axios.get('/users')
.then(response => {
this.users = response.data;
});
} else {
this.showDropdown = false;
}
},
handleUserClick(user) {
this.content = this.content.slice(0, -1) + `@${user.name} `;
this.showDropdown = false;
}
}
}
</script>
```
以上代码的思路是:监听输入框的输入事件,当用户输入以 `@` 结尾时,向后端发送请求获取所有用户列表,显示下拉框,当用户选择一个用户时,将其添加到输入框中,并隐藏下拉框。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)