uni-app nvue怎么写@人的功能 editor用不了

在uni-app中使用nvue编写“@人”的功能，由于nvue是基于Weex引擎的，其组件和API与普通的Vue页面有所不同，因此实现方式会有所差异。由于nvue不支持直接使用一些HTML元素和Vue组件（比如富文本编辑器），我们需要借助一些其他的手段来实现这一功能。

以下是一个基本的实现思路，使用nvue的text组件结合rich-text组件来模拟“@人”的功能。由于nvue不直接支持富文本编辑，我们可能需要通过其他方式（比如使用原生模块或第三方插件）来实现复杂的文本编辑功能，但这里我们仅展示如何展示和处理“@人”的文本。

示例代码

1. 数据准备

首先，我们需要准备一个包含“@人”标记的文本数据。

data() {
    return {
        content: "这是一个测试文本，@张三 和 @李四 需要被提到。"
    };
}

1. 模板实现

在nvue中使用rich-text组件来渲染文本，并通过正则表达式匹配“@人”的部分，用特定的样式来展示。

<template>
    <div>
        <rich-text :nodes="formattedContent"></rich-text>
    </div>
</template>

<script>
export default {
    data() {
        return {
            content: "这是一个测试文本，@张三 和 @李四 需要被提到。"
        };
    },
    computed: {
        formattedContent() {
            // 使用正则表达式匹配@人并添加样式
            const regex = /@(\w+)/g;
            return this.content.replace(regex, (match, p1) => {
                return `<text style="color: blue;">@${p1}</text>`;
            });
        }
    }
};
</script>

<style scoped>
/* 添加其他样式 */
</style>

注意事项

• 性能问题：rich-text组件在处理大量节点时可能会有性能问题，因此如果文本内容非常复杂或庞大，需要考虑性能优化。
• 编辑功能：nvue本身不支持富文本编辑，如果需要实现编辑功能，可能需要借助原生插件或Webview来实现。
• 跨平台差异：不同平台（如iOS和Android）在nvue的渲染上可能会有细微差异，需要进行适配和测试。

以上代码仅用于展示如何在nvue中展示带有“@人”标记的文本，并未实现完整的编辑功能。如果需要实现编辑功能，建议查阅uni-app的官方文档或寻找第三方插件来辅助实现。