Vue实现输入框@功能的示例代码

下面是关于“Vue实现输入框@功能的示例代码”的完整攻略。

1. 标准的输入框@功能实现

首先来看一下标准的输入框@功能的实现代码：

<template>
  <div>
    <input type="text" v-model="content" @input="handleInput">
    <div>
      <span v-for="item in atItems">{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      atItems: [],
    };
  },
  methods: {
    handleInput() {
      let reg = /@([^\s]*)$/i;
      let content = this.content.substring(0, this.$refs.input.selectionStart);
      let atText = content.match(reg);
      this.atItems = [];
      if (atText) {
        for (let i = 0; i < atText.length; i++) {
          this.atItems.push(atText[i].substring(1, atText[i].length));
        }
      }
    },
  },
};
</script>

这份代码的实现方式很简单，首先在<input>标签中添加@input对应的事件处理函数，同时添加一个监听v-model。然后在handleInput函数中，使用正则表达式来获取输入框中的@字符，再从@字符中截取需要展示的内容，并存入到atItems数组中。最后在<span>标签中展示atItems数组的内容。

2. 实现输入框@功能并触发回调函数的示例

除了实现@功能外，还可以在实现@功能的同时，通过触发回调函数，对获取的@信息进行处理。下面是一份示例代码：

<template>
  <div>
    <input type="text" v-model="content" @input="handleInput">
    <div>
      <span v-for="item in atItems">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      atItems: [],
    };
  },
  methods: {
    handleInput() {
      let reg = /@([^\s]*)$/i;
      let content = this.content.substring(0, this.$refs.input.selectionStart);
      let atText = content.match(reg);
      this.atItems = [];
      if (atText) {
        for (let i = 0; i < atText.length; i++) {
          let name = atText[i].substring(1, atText[i].length);
          this.atItems.push({ name });
        }
        this.handleAtChange(this.atItems);
      } else {
        this.handleAtChange([]);
      }
    },
    handleAtChange(items) {
      // 在这里处理获取到的@信息
      console.log(items);
    },
  },
};
</script>

在这份代码中，我们在handleInput函数中，在处理@信息后，将结果存入到atItems数组中，并调用handleAtChange函数。同时，在handleAtChange函数中，我们对获取到的@信息进行处理，这里仅添加了一行代码：console.log(items);，显示了获取到的@信息。当然，你可以在这里编写更完整的代码来处理@信息。