vue 实现类似话题插入编辑功能

类似话题插入编辑功能可以使用 Vue 自定义指令来实现。以下是一个简单的实现示例：

<template>
  <div>
    <textarea v-model="content" v-mention></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    }
  },
  directives: {
    mention: {
      inserted: function (el) {
        let textarea = el;
        textarea.addEventListener('input', function () {
          let value = textarea.value;
          let regex = /#(\w+)/g;
          let newContent = value.replace(regex, '<span class="mention">#$1</span>');
          textarea.innerHTML = newContent;
        });
      }
    }
  }
}
</script>

<style>
.mention {
  color: blue;
}
</style>

在上面的示例中，使用自定义指令 `v-mention` 来绑定一个事件监听器，当用户在文本框中键入时触发。在事件处理程序中，使用正则表达式 `#(\w+)` 匹配话题符号 `#` 和后面的话题名称，然后将其替换为带有样式的 `span` 元素。在样式中定义 `.mention` 类的样式，来改变话题的显示效果。

这样，当用户在文本框中输入话题符号 `#` 和话题名称时，就会自动将其转换为带有样式的 `span` 元素。