UniApp中实现类似微信聊天@功能代码

实现类似微信聊天中的@功能，可以考虑以下几种方案：

1. 基于输入框的@自动提示功能：通过监听输入框的输入事件，在用户输入@字符时，根据已有的聊天对象列表进行自动提示，支持用户选择并添加到输入框中。这种方案相对简单，但需要对输入框进行一定程度的封装和自定义开发。

2. 基于消息列表的@选择功能：在消息列表中添加一个@选择器组件，用户点击该组件后，弹出一个列表，列出当前群聊中的成员，用户可以选择并添加到输入框中。这种方案相对复杂，但可以提供更好的用户体验。

下面是一些基于UniApp的代码示例：

1. 基于输入框的@自动提示功能：

<template>
  <view>
    <input type="text" v-model="message" @input="handleInput" />
    <ul v-if="showList">
      <li v-for="(item, index) in list" :key="index" @click="handleSelect(item)">
        {{ item }}
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      list: ['小明', '小红', '小李'],
      showList: false
    }
  },
  methods: {
    handleInput(e) {
      const value = e.target.value
      if (value.indexOf('@') !== -1) {
        this.showList = true
      } else {
        this.showList = false
      }
    },
    handleSelect(item) {
      this.message += `@${item} `
      this.showList = false
    }
  }
}
</script>

2. 基于消息列表的@选择功能：

<template>
  <view>
    <ul>
      <li v-for="(item, index) in messageList" :key="index">
        <span @click="handleSelect(item.user)">@{{ item.user }}：</span>{{ item.content }}
      </li>
    </ul>
    <popup v-model="showPopup">
      <view>
        <ul>
          <li v-for="(item, index) in userList" :key="index" @click="handleAdd(item)">
            {{ item }}
          </li>
        </ul>
      </view>
    </popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        { user: '小明', content: '你好啊' },
        { user: '小红', content: '在忙什么呢' },
        { user: '小李', content: '今天天气不错' }
      ],
      userList: ['小明', '小红', '小李'],
      showPopup: false,
      selectedUser: ''
    }
  },
  methods: {
    handleSelect(user) {
      this.selectedUser = user
      this.showPopup = true
    },
    handleAdd(user) {
      this.messageList.push({ user, content: `@${user} ` })
      this.showPopup = false
    }
  }
}
</script>

以上代码仅供参考，实际开发中需要根据具体需求进行适当调整和优化。