vue 输入框@人功能组件，支持复制粘贴

在Vue中创建一个支持复制粘贴的@人功能组件，可以通过监听输入框的input或change事件，并使用正则表达式来识别并替换带有@符号的文本为超链接或者其他格式。以下是一个简单的例子：

<template>
  <div>
    <textarea v-model="text" @input="handleInput"></textarea>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    handleInput() {
      const atRegex = /@\w+/g;
      const matches = this.text.match(atRegex);
      if (matches) {
        matches.forEach(mention => {
          // 这里可以实现将@username替换为超链接或其他格式
          // 例如：this.text = this.text.replace(mention, `<a href="/user/${mention.slice(1)}">${mention}</a>`);
          this.text = this.text.replace(mention, `[${mention}]`);
        });
      }
    }
  }
};
</script>

在这个例子中，当用户在textarea中输入文本时，handleInput方法会被触发。该方法使用正则表达式寻找以@开头的单词（\w+代表一个或多个单词字符），然后替换这些匹配项。这里的替换操作可以根据需求进行自定义，例如，可以将其替换为超链接或其他格式。