类似微博的输入@自动弹出选择用户界面

1.评论区的代码（部分无关的删除）

<a-modal
      v-model="commentsDialogVisible"
      title="评论"
      @ok="addComment"
      @cancel="commentsDialogVisible = false"
      destroyOnClose
    >
      <user-select :visible="visible" title="选择用户" @onSelect="triggerChange2" @cancel="visible = false" />
      <a-input
              type="textarea"
              :rows="5"
              placeholder="评论内容(可输入@选择用户)"
              style="width: 100%;"
              v-model="commentContent"
              @input="onInput"
              ref="comments"
      >
      </a-input>
  
    </a-modal>

2.相关js代码

 onInput (e) {
    // console.log(e)
    if(e.data === '@'){
      // console.log('已输入@')
      this.visible = true
    }
  }
triggerChange2  ({ id, name }) {
    this.visible = false
    // Should provide an event to pass value to Form.
    // console.log(id)
    this.commentContent = this.commentContent + name + ' ';
    ((this.$refs.comments) as HTMLTextAreaElement).focus()
  }

如果用的是TS语法，this.$refs.comments要用HTMLTextAreaElement进行强弱类型转化
js则不用

2.输入@

直接弹出选择框
选择框是提前写好的组件user-select

<template>
  <a-modal :visible="visible" :title="title" :mask="mask" :width="600"
    style="top: 20px;"    
      @cancel="$emit('cancel')"
      :footer="null"
    >
    <div class="table-page-search-wrapper" style="margin-bottom: 16px;">
      <a-row>
        <a-col :span="8">
          <a-input v-model="query.name" @change="search" placeholder="输入姓名"></a-input>
        </a-col>
        <a-col :span="8">
          <a-input v-model="query.mobile" @change="search" placeholder="输入手机号"></a-input>
        </a-col>
        <a-col :span="8">
          <a-input v-model="query.username" @change="search" placeholder="输入用户名"></a-input>
        </a-col>
      </a-row>
    </div>
    <s-table
      ref="table" size="default" :columns="columns" :data="loadData"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="$emit('onSelect', record)">选择</a>
      </span>
    </s-table>
  </a-modal>
</template>
<script>
import STable from '@/components/Table'
import { getUserList } from '@/api/module/api-user'
import { debounce } from 'lodash'

export default {
  props: {
    title: {
      type: String
    },
    visible: {
      type: Boolean
    },
    mask: {
      type: Boolean,
      default(){
        return false
      }
    }
  },
  components: { STable },
  data(){
    return {
      columns: [
        {
          dataIndex: "id",
          title: "#"
        },
        {
          dataIndex: "name",
          title: "名字"
        },
        {
          dataIndex: "orgName",
          title: "所属公司"
        },
        {
          dataIndex: "mobile",
          title: "电话",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" }
        }
      ],
      query: {
          mobile: '',
          name: '',
          username: '',
      },
      loadData: (param) => {
        return getUserList(this.query, param)
      }
    }
  },
  methods: {
    search: debounce(function(){
      this.$refs.table.refresh()
    }, 200)
  }
}
</script>
<style lang="scss" scoped>

</style>

需要配合相关后台接口

提交表单后配合后端接口就实现功能了
这里管理员后面有一个空格

这篇博客是为了记录我学习和工作中遇到的问题，方便回顾，仅供参考