前端 - 类似京东订单评论的功能如何开发?

Question

框架:UNIAPP.先上图:

这是京东的订单评论功能，文本输入框在不选择标签时可正常输入评论，此时有几个标签可供用户选择，选择完标签后，另起一行，在文本框中出现带标签的文字(如图中箭头所示)，可输入相关内容，再点击标签时提示请删除标签后内的内容。删除完内容后再按一次键盘上的删除键，整个标签被删除。

想问下这种功能是怎么实现的？

Answer 1

实现类似京东订单评论的功能，在UNIAPP框架中，可以通过以下步骤进行：

1. 创建评论输入框：

   • 使用<input>组件或者UNIAPP提供的相应文本输入组件来创建评论输入框。
   • 监听输入框的input事件，以便在用户输入时获取文本内容。

2. 实现标签选择功能：

   • 设计一个标签列表，可以是<view>元素组成的列表，每个<view>代表一个标签。
   • 为每个标签添加点击事件监听，当用户点击某个标签时，触发相应的事件处理函数。

3. 处理标签点击事件：

   • 在事件处理函数中，将所选标签的文本添加到评论输入框的文本内容中，并在标签文本前后添加特定的标识符（如特殊字符或HTML标签），以便后续识别和处理。
   • 可以使用字符串拼接或模板字符串来实现这一功能。

4. 处理标签内容的删除：

   • 当用户点击已添加的标签时，提示用户删除标签内的内容。
   • 监听输入框的keydown事件，当用户按下删除键（通常是Backspace键）时，检查当前光标位置是否位于标签内容内。
   • 如果是，则删除标签内容；如果不是，则正常删除字符。

5. 删除整个标签：

   • 当用户删除完标签内容后，再次按下删除键时，检查是否处于标签的起始位置。
   • 如果是，则删除整个标签文本（包括前后标识符）。

6. 优化用户体验：

   • 可以考虑添加一些额外的功能，如限制标签数量、限制评论长度、实时预览评论效果等。
   • 还可以对输入框和标签进行样式定制，以符合应用的整体风格。

请注意，上述步骤是一个基本的实现思路，具体实现时可能需要根据UNIAPP的API和文档进行调整和优化。同时，还需要考虑到跨平台兼容性、性能优化等方面的问题。

由于实现细节可能因具体需求和框架版本而有所不同，这里无法提供完整的代码示例。但你可以根据上述步骤和思路，结合UNIAPP的官方文档和示例代码进行开发和调试。