在 Vue 3 中巧妙实现 @ 人功能：打造用户友好体验

2024-01-12 06:11:06

在 Vue 3 中实现无缝的 @ 人功能

随着社交媒体和即时通讯应用的蓬勃发展，@ 人功能已成为一种不可或缺的交流方式。它使我们能够轻松标记其他用户，让沟通更加直接、高效。作为一名 Vue 3 开发人员，有必要掌握这项技能，为您的用户提供无缝的交流体验。

构建 Vue 3 @ 人组件

创建组件：
从创建一个名为 AtPeople.vue 的 Vue 3 组件开始。这将是我们的 @ 人组件的基础。

<template>
  <input type="text" v-model="query" @input="handleInput">
  <ul v-if="suggestions.length > 0">
    <li v-for="suggestion in suggestions" :key="suggestion.id">
      {{ suggestion.name }}
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const query = ref('')
    const suggestions = ref([])

    const handleInput = (e) => {
      // ... 实现用户名查询逻辑
    }

    return { query, suggestions, handleInput }
  }
}
</script>

查询用户名：
在 handleInput 方法中，实现用户名查询逻辑，在用户输入时动态显示潜在用户名。
显示建议：
查询完成后，将结果存储在响应式数组 suggestions 中。当 suggestions 数组非空时，渲染包含匹配用户名的列表。
集成到项目中：
现在，您可以将 @ 人组件导入项目中，并在需要时使用它。

<template>
  <AtPeople v-model="selectedUser" />
</template>

<script>
import AtPeople from './components/AtPeople.vue'

export default {
  components: { AtPeople },
  data() {
    return { selectedUser: null }
  }
}
</script>